Get position of dragged window

[WaveTeamMember]

Hi,

How can I get dragged window’ position. I have mostly 9 (item div) windows on single page. User can drag n drop any window and set position (location) of each item. I have to get exact position (atleast order of each window) of all window and store it into database for future reference. Please help me how can I get position/order of each window and show as per user existing settings.
I have used displayWindowsPositions method but it cannot let me know all 9 or less windows position or ordering.

below are my div structure

&lt div &gt
&lt div &gt
&lt div style=”float: left;width:460px” &gt
&lt div style=”height: 194px” &gt
&lt div &gt Cash Summary&lt /div &gt
&lt div&gt &lt /div&gt
&lt /div &gt
&lt div style=”height: 194px” &gt
&lt div&gtCash Receviables&lt /div &gt
&lt div&gt&lt /div &gt
&lt /div &gt
&lt /div &gt
&lt div style=”width:460px;float: left” &gt
&lt div style=”height: 194px” &gt
&lt div &gtCash Payables&lt /div &gt
&lt div &gt</div &gt
&lt /div &gt
&lt div style="height:194px" &gt
&lt div &gtProfit and Loss&lt /div &gt
&lt div &gt&lt /div &gt
&lt /div &gt
&lt /div &gt

&lt /div &gt
&lt /div &gt

-Thanks

[WaveTeamMember]

Hi,

Sorry for last code, here are the proper code.

$('#docking').jqxDocking({ theme: 'classic', orientation: 'horizontal', width: 935, mode: 'default' });
$('#docking').jqxDocking({orientation: 'horizontal', mode: 'docked' });
$('#docking').jqxDocking('disableWindowResize', 'window0');
$('#docking').jqxDocking('disableWindowResize', 'window1');
$('#docking').jqxDocking('disableWindowResize', 'window2');
$('#docking').jqxDocking('disableWindowResize', 'window3');

function displayWindowsPositions(window) {
var parent = $('#' + window).parent(),
windows = parent.children('.jqx-window'),
current;
$('#data').empty();

for (var position = 0; position < windows.length; position += 1) {
current = windows[position];

$('#data').append(
'

' + $(current).find('.jqx-window-header').text() + '

'
);
if ($(window).attr('id') === window) {
return position;
}
}
}
$('#docking').bind('dragEnd', function (event) {
displayWindowsPositions(event.args.window);
});
});

<div id="jqxWidget">
		<div id="docking">
				<div style="float: left; width:460px;">
					<div id="window0" style="height: 194px;">
						<div  class="drag-panal-header">Cash Summary</div>
						<div id="box1"></div>
					</div>
					<div id="window1" style="height: 194px;">
						<div  class="drag-panal-header" >Cash Receviables</div>
						<div id="box2"></div>			
					</div>					
				</div>
				<div style="width:460px;float: left;">
					<div id="window2" style="height: 194px;">
						<div class="drag-panal-header">Cash Payables</div>
						<div id="box3"></div>			
					</div>		
					<div id="window3" style="height:194px;">
						<div class="drag-panal-header">Profit and Loss</div>
						<div id="box4"></div>			
					</div>
				</div>
	
		</div>
	</div>
	<div id="data" style="border-width: 0px; float: left; margin-left: 30px;"></div>

In ‘#data div’ I did not get all windows location/order. Here I added only 4 window but in my case it would be max 9 or less window.

Thanks again.

[Peter StoevKeymaster]

Hi WaveTeam,

You can select a window by Id with jQuery and use the jQuery’s offset method to get its location.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[WaveTeamMember]

Hi Peter,

Thank you for your reply. actually I need to insert order of each updated window into database. I wont need position (offset) of each window.
e.g. default:
window(1) – 1 (order)
window(2) – 2
window(3) – 3
window(4) – 4

After dragged:
window(3) – 1 (order)
window(2) – 2
window(4) – 3
window(1) – 4

I need all window’ order, so in above case it will return –
window3, position/order = 1.
window2, position/order = 2.
window4, position/order = 3.
window1, position/order = 4.

Thank you

[Peter StoevKeymaster]

Hi WaveTeam,

Ok, then I suggest you to use the jqxDocking’s exportLayout method which returns JSON as a result.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[WaveTeamMember]

Thank you Peter,

It seems.. it will work for me. I will check it.

Thanks again.

[WaveTeamMember]

Hi Peter,

It almost done, thank you for your support. I just need to set window as per user existing settings. How can I set window order (sequence) as per existing orders. I dont have position (left, top), I have order/sequence of each window

Thank you.

[WaveTeamMember]

I have done it. Thank you Peter for your quick response and support.

Thank you.

[Author]

Posts