Web simulation of the drag effect of QQ panel

Bo Master of the front-end primer is in the MU class network, there is a demo, is in the web simulation of a QQ panel drag effect (, with two div instead of ...) The effect is to drag the middle Div, the entire Div follows the move, to summarize the record today.

The idea is that when the mouse is pressed, the distance from the left and top edge of the screen is calculated, and the element is assigned synchronously. The key point here is the use of the distance between the element in JS and the root element (or the specified parent element), which is offset.

first assume that the outer box is called D1, and the middle box is center. Add an event for D1 When the mouse is pressed in center :

JavaScript Document

function Drag () {"Use strict";var ce = document.getelementsbytagname ("div") [1];ce.onmousedown = client;//Get middle box, add event when mouse is pressed} and get the current position of the D1 (clientx,clienty) (the reference frame here is the current window, if the browser window is reduced, the movable area is reduced), and then get the position coordinates of the D1 Distance window edge (offsetleft , OffsetTop), where no reference is set to the parent element, so the root element is the reference, the body. The difference between the two is that the entire div should change the amount of coordinates. When the coordinates of the D1 are added to the change, the new coordinate values of the whole div are obtained. Using onmousemove to update the DIV coordinates at any time, you get the effect of dragging.
function Client (Eve) {"Use strict";Eve = Eve | | window.event;//Compatibilityvar D1 = document.getElementById ("D1");var disx = eve.clientx-d1.offsetleft,disy = eve.clienty-d1.offsettop;document.onmousemove = function (event) {event = Event | | window.event;mov (event, DISX, Disy);    };document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;//empty event when Mouse is released    };} To prevent the box from moving outside the window, edge detection is required, because the window's coordinate system is the origin of the upper-left corner of the screen, so the left detection and top detection only need to see the mouse coordinates- D1 distance from the left/top of the window is equal to 0 on the line. The right detection needs to calculate the distance from the left edge of the box + whether the width of the box itself exceeds the width of the browser window itself, and the width of the viewable area of the browser itself is clientwidth. The width of the box itself is d1.offsetwidth, the difference between the two is the maximum value of the mouse moving in the x direction. When the mouse moves to the maximum value, the box is moved to the right edge of the screen. The bottom is similar to the right.
function mov (e, posx, posy) {"Use strict";e = e | | window.event;var D1 = document.getElementById ("D1");var L = e.clientx-posx,h = e.clienty-posy;var r = document.documentelement.clientwidth-d1.offsetwidth | | document.body.clientwidth-d1.offsetwidth;//Compatibility Gets the width of the current window-d1 the width of the boxvar b = document.documentelement.clientheight-d1.offsetheight | | document.body.clientwidth-d1.offsetwidth;//And Capacitive gets the height of the current window-d1 the height of the boxif (l <= 0) {L = 0;}if (H <= 0) {h = 0;}if (l >= r) {L = r;}if (h >= b) {h = b;}//set coordinates so that the box does not exceed the window//document.title=e.clientx+ "," +e.clienty;d1.style.left = l + "px";d1.style.top = h + "px";}  

Web simulation of the drag effect of QQ panel