Calculation of pixels from the form side and sending via POST request

Question

I want to understand how to calculate the dimensions in pixels from the form side (red arrows in the figure) and the size of the window Channel 1 and Channel 2 and send them in two different POST requests via AJAX. In this case, I need to pass such a value - <channel> <hstart (пиксели когда начинается channel1 сверху)> <hsize (размер окна hight)> <vstart (пиксели когда начинается channel1 с лева[всегда с лева считается])> <vsize (размера окна width)> .

 <!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; } .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" }); /* Перемещение объекта */ $("#draggable2").resizable({ helper: "ui-resizable-helper", containment: "#snaptarget" }); /* Увелечение/Уменьшение объекта */ $("#draggable3").draggable({ snap: ".ui-widget-header", snapMode: "outer" }); /* Перемещение объекта */ $("#draggable3").resizable({ helper: "ui-resizable-helper", containment: "#snaptarget" }); /* Увелечение/Уменьшение объекта */ }); </script> </head> <body> <div id="snaptarget" class="ui-widget-header"> </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’ve just started writing code, it’s not a bit of what it takes now.

Accepted Answer · 2016-09-02T14:24:20

 <!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(); document.querySelector('#chan_'+channel).innerHTML='channel '+channel+': top: '+(Rect.top-papa.top)+'px, right: '+(papa.right-Rect.right)+'px, bottom: '+(papa.bottom-Rect.bottom)+', left: '+(Rect.left-papa.left)+', width: '+EL.offsetWidth+'px, height: '+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>

Well, sending can be crammed into the same function (getPosSize)

Although here it is necessary to transfer it in a specific format, so it’s not a fact that it will work.
I tried your code to begin with, it gives me these values - channel 1: top: 97px, right: 189px, bottom: 18, left: 6, width: 287px, height: 157px.
It turns out, he considers from two sides and the element itself?
@Insider from all four sides relative to snaptarget + its width and height
@smellyshovel Need to hang a handler - sending only when all values are positive (not minus)
This is a fairly universal feature, only you will need to parse it later, in order to fit your format.

Answer 2 · 2016-09-02T14:16:27

Find the necessary items:
Vanilla js

let drugables = document.querySelectorAll(".druggable");

Find the form #for-druggables on the page and dynamically create the required number of hidden fields:
Vanilla js

 form = document.querySelector("#for-druggables"); for (dg of druggables) { let elem = document.createElement("INPUT"); elem.setAttribute("type", "hidden"); elem.setAttribute("name", `dg-${dg.id}`); elem.setAttribute("value", `${dg.offsetLeft}, ${dg.offsetTop}`); form.appendChild(elem); }

Now we have on the page a form filled with hidden fields containing the value of the format отступ_слева, отступ_сверху . It remains to send it. We catch the dispatch event (for example, it can be a click on the #send button):
Vanilla js

 let send = document.querySelector("#send"); send.addEventListener("click", function() { form.submit(); });

It remains to send AJAX'om. Here I will not paint, the examples are full, you just need to search. Just throw in a little idea how to organize:
Jquery

 form.on("submit", function() { sendAjax(); return false; // чтобы не отправилось обычным способом. });

Now the data format needs to be adjusted only, which will be sent.
That is, as I understand it, you need to send an indent to the left, an indent from above, the height and width of the element.
Yes, only one of the elements at the same time, when moving / zooming.
@Insider Only one, at the moment when it is increased / moved?
at the completion of the movement or increase of the element in the gray element, otherwise it should not send anything.
@Insider in this case, you need to hang 2 handlers: addEventListener("dragend", function() {});
The only problem is that I did not find the handler just under the resize completion, it is likely that it will be sent constantly while it is being held.

Calculation of pixels from the form side and sending via POST request

2 answers 2

More articles: