With the changes of the times, the importance of js is increasingly felt. js can not only make web pages (such as Ext framework), but also make some web special effects. These special effects are not only compatible with PCs, but also compatible with mobile phones. After all, they are based on The browser has nothing to do with the platform. Now Microsoft's Windows 8 system apps can be developed using js. If you have time, you can try it.
Now let’s get to the point and talk about how to implement draggable Div in js. To achieve this function, let’s first talk about the idea:
1. Capture the mousedown event of the mouse div
2. Capture the mousemove event of document
3. Cancel the event
Then let's take a look at the code:
Copy the 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 div object
Copy the code code as follows:
var $ = function (flag) {
return document.getElementById(flag);
}
2. Capture the document’s mousedown event:
There is this piece of code in it:
Copy the 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;
}
}
Among them, event gets the mouse event, pageX and pageY get the coordinates of the mouse, layerX and layerY get the distance between the mouse and the div border.
There is also a piece of code:
Copy the code code as follows:
if (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
This is to capture the MouseMove and MouseUp events of the div. If you don’t know tx, you can check it online.
3. document’s MouseMove and mouseUp events:
Copy the 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;
}
Among them, tx and ty are the most important codes, which are used to set the div coordinates.
Some people may ask why -x,-y?
x, y actually get the distance between the mouse and the div border, if it is not subtracted
The coordinates of the mouse arrow are the same as the x and y coordinates of the div. After dragging, the mouse position will move to the upper left corner. The effect is that it will bounce after dragging.
Copy the 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 to cancel the onmousemove and onmouseup events of the document after the mouse is released.
I have been learning js recently, and I will share my new experiences with you in the future. I hope to learn and make progress together with everyone.