I want to understand how to add a function. The function is performed when the page is loaded and it should position the elements on a gray background correctly from the sides and the size of the white windows (elements) themselves. At the moment, when moving elements, the following values are sent - left, top, width, height . left and top is the position of the element on the gray element. width and height size of the white elements themselves.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Draggable - Snap to element or grid</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> .draggable2 { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; margin-left: 10px; position: absolute; left: 0px; top: 300px; } .draggable3 { width: 90px; height: 80px; padding: 5px; margin: 0 10px 10px 0; font-size: .9em; margin-left: 10px; position: absolute; left: 120px; top: 300px; } .ui-widget-header p, .ui-widget-content p { margin: 0; } /* Разрешение экрана нужно получать */ #snaptarget { height: 270px; width: 480px; font-weight: 100; font-size: 10px; } .ui-resizable-helper { border: 2px dotted #000000; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script> $(function() { $("#draggable2").draggable({ snap: ".ui-widget-header", snapMode: "outer", stop:function(){ getPosSize(this,1); } }); /* Перемещение объекта */ $("#draggable2").resizable({ helper: "ui-resizable-helper", containment: "#snaptarget", stop:function(){ getPosSize(this,1); } }); /* Увелечение/Уменьшение объекта */ $("#draggable3").draggable({ snap: ".ui-widget-header", snapMode: "outer", stop:function(){ getPosSize(this,2); } }); /* Перемещение объекта */ $("#draggable3").resizable({ helper: "ui-resizable-helper", containment: "#snaptarget", stop:function(){ getPosSize(this,2); } }); /* Увелечение/Уменьшение объекта */ }); function getPosSize(EL,channel){ var Rect=EL.getBoundingClientRect(); var papa=snaptarget.getBoundingClientRect(); alert('top: '+(Rect.top-papa.top)+'px\nleft: '+(Rect.left-papa.left)+'px\nwidth: '+EL.offsetWidth+'px\nheight: '+EL.offsetHeight+'px'); } </script> </head> <body> <div id="snaptarget" class="ui-widget-header"> <div id="chan_1"></div> <div id="chan_2"></div> </div> <br style="clear:both"> <div id="draggable2" class="draggable2 ui-widget-content"> <p>CHANNEL 1</p> </div> <div id="draggable3" class="draggable3 ui-widget-content"> <p>CHANNEL 2</p> </div> </body> </html> I assume the script should look like this.
window.onload = function(EL, channel){ $.ajax({ type: "GET", url: "/get_win2_output_2", processData: true, dataType: "text", cache: false, success: function (data) { var get_win2_output_2 = jQuery.parseJSON(data); $("div[id='draggable3']").css({ left: get_win2_output_2.left, top: get_win2_output_2.top, width: get_win2_output_2.width, height: get_win2_output_2.height }) } }); $.ajax({ type: "GET", url: "/get_win1_output_1", processData: true, dataType: "text", cache: false, success: function (data) { var get_win1_output_1 = jQuery.parseJSON(data); $("div[id='draggable2']").css({ left: get_win1_output_1.left, top: get_win1_output_1.top, width: get_win1_output_1.width, height: get_win1_output_1.height }) } }) } But the position of the white elements is not correct here.
