The method of realizing the drag div with JS _javascript skill

With the changes in the times, more and more sense of the importance of JS, JS not only can do Web pages (such as ext frame), can also do some web effects, these special effects not only compatible with the PC, but also compatible with the mobile phone, after all, is browser-based, and platform does not matter. Now Microsoft's WINDOWS8 system app can be developed with JS, we have time to try.

Now cut to the point, talk about JS implementation can drag div. Implement this function let's start with the idea:

1. Capture the MouseDown event of the mouse div

2. Capture of document MouseMove events

3. Cancellation of events

And then we'll look at the code:

Copy Code code as follows:

function Drag (ID) {
var $ = function (flag) {
return document.getElementById (flag);
}
$ (id). onmousedown = function (e) {
var d = document;
var page = {
Event:function (evt) {
var ev = EVT | | window.event;
return EV;
},
Pagex:function (evt) {
var e = this.event (EVT);
return E.pagex | | (E.clientx + document.body.scrollleft-document.body.clientleft);
},
Pagey:function (evt) {
var e = this.event (EVT);
return E.pagey | | (E.clienty + document.body.scrolltop-document.body.clienttop);

},
Layerx:function (evt) {
var e = this.event (EVT);
return E.layerx | | E.offsetx;
},
Layery:function (evt) {
var e = this.event (EVT);
return E.layery | | E.offsety;
}
}
var x = Page.layerx (e);
var y = page.layery (e);
if (dv.setcapture) {
Dv.setcapture ();
}
else if (window.captureevents) {
Window.captureevents (Event.mousemove | Event.mouseup);
}
D.onmousemove = function (e) {
var tx = Page.pagex (e)-X;
var ty = Page.pagey (e)-y;
Dv.style.left = tx + "px";
Dv.style.top = ty + "px";
}
D.onmouseup = function () {
if (dv.releasecapture) {
Dv.releasecapture ();
}
else if (window.releaseevents) {
Window.releaseevents (Event.mousemove | Event.mouseup);
}
D.onmousemove = null;
D.onmouseup = null;
}
}
}

Code Analysis:

1.

Get a Div object

Copy Code code as follows:

var $ = function (flag) {
return document.getElementById (flag);
}

2. Capture Document MouseDown events:

There's this piece of code:

Copy Code code as follows:

var page = {
Event:function (evt) {
var ev = EVT | | window.event;
return EV;
},
Pagex:function (evt) {
var e = this.event (EVT);
return E.pagex | | (E.clientx + document.body.scrollleft-document.body.clientleft);
},
Pagey:function (evt) {
var e = this.event (EVT);
return E.pagey | | (E.clienty + document.body.scrolltop-document.body.clienttop);

},
Layerx:function (evt) {
var e = this.event (EVT);
return E.layerx | | E.offsetx;
},
Layery:function (evt) {
var e = this.event (EVT);
return E.layery | | E.offsety;
}
}

Where event gets mouse events, Pagex,pagey gets the coordinates of the mouse, Layerx,layery gets the distance of the mouse from the div border.

There is another piece of code:

Copy Code code as follows:

if (dv.setcapture) {
Dv.setcapture ();
}
else if (window.captureevents) {
Window.captureevents (Event.mousemove | Event.mouseup);
}

This is to capture Div MouseMove and MouseUp events, do not know that TX can be online search.
3. MouseMove and MouseUp events in document:

Copy Code code as follows:

D.onmousemove = function (e) {
var tx = Page.pagex (e)-X;
var ty = Page.pagey (e)-y;
Dv.style.left = tx + "px";
Dv.style.top = ty + "px";
}
D.onmouseup = function () {
if (dv.releasecapture) {
Dv.releasecapture ();
}
else if (window.releaseevents) {
Window.releaseevents (Event.mousemove | Event.mouseup);
}
D.onmousemove = null;
D.onmouseup = null;
}

Where the tx,ty is the most important code, is to set the div coordinates

Some people may ask why to-x,-y?

X,y is actually to get the mouse distance div border, if not lost

The coordinates of the mouse arrow and the x,y coordinates of the Div, so drag, the position of the mouse will be biased to the upper left corner, the effect is, after dragging will move.

Copy Code code as follows:

if (dv.releasecapture) {
Dv.releasecapture ();
}
else if (window.releaseevents) {
Window.releaseevents (Event.mousemove | Event.mouseup);
}
D.onmousemove = null;
D.onmouseup = null;

The above code is the Onmousemove,onmouseup event that cancels the document after the mouse is loosened.

Have recently been learning JS, follow-up has a new experience will be shared with you, hope to learn and progress together.