Using JS to achieve the layout drag effect

Similar to such a layout, click on the title bar, to achieve the drag effect.

Add onmousedown Event

Change the position of the panel by getting the coordinates of the mouse (Clientx,clienty)

Note: The panel uses absolute positioning, the upper left corner as the reference point, so we also need to get the mouse in the position of the Panel, that is, the location of the mouse as a reference point.

// the distance between the cursor and the panel when the cursor is pressed      disx=event.clientx-odrag.offsetleft,      disy=event.clienty-odrag.offsettop;

Add onmousemove Event

After getting the mouse position relative to the panel, set the left of the panel, and top for the mouse coordinates and the corresponding value of the difference can be.

// calculate location and set    l=event.clientx-Disx;　　T=event.clienty-Disy;　　ODrag.style.left=l+ "px"; ODrag.style.top=t+ "px";

Thinking? Can you directly set the value of LETF and top to the Offsetleft and offsettop properties of the panel, and the values in the mathematical expression are equal.

No, the whole process needs to be divided into these two steps!!!

Add onmouseup Event

// Release Mouse  document.onmouseup=function() {      Document.onmousemove=null;      Document.onmouseup=null;  }

Use JS to achieve layout drag effect