Simple drag effects implemented by js _ javascript tips-js tutorial

This article will share with you a simple drag-and-drop effect plug-in implemented using pure JS, which is a small test of javascript learning. If you need complex drag-and-drop effects, consider jQuery's draggable, which is more mature. Front-end development, there are a lot of places to use the drag effect, of course, http://jqueryui.com/draggable/ is a good choice, but I am a person who breaks the casserole to ask the end, take some time to implement similar plug-ins with a small JavaScript code.

First: html and css

The Code is as follows:

Now:

The Code is as follows:

Script
Window. onload = function (){
// Obtain the p to be dragged
Var p1 = document. getElementById ("p1 ");
// Add a mouse-down event
P1.onmousedown = function (evt ){
Var oEvent = evt | event;
// Obtain the distance from the mouse to the p left top.
Var distanceX = oEvent. clientX-p1.offsetLeft;
Var distanceY = oEvent. clientX-p1.offsetTop;
// Add doc sliding time
Document. onmousemove = function (evt ){
Var oEvent = evt | event;
// Recalculate the left top value of p
Var left = oEvent. clientX-distanceX;
Var top = oEvent. clientY-distanceY;
// When left is less than or equal to zero, it is set to zero to prevent p from dragging out of document.
If (left <= 0 ){
Left = 0;
}
// When left exceeds the right boundary of the document, set it to the right boundary.
Else if (left> = document.doc umentElement. clientWidth-p1.offsetWidth ){
Left = document.doc umentElement. clientWidth-p1.offsetWidth;
}
If (top <= 0 ){
Top = 0;
}
Else if (top> = document.doc umentElement. clientHeight-p1.offsetHeight ){
Top = document.doc umentElement. clientHeight-p1.offsetHeight;
}
// Assign a value to p again
P1.style. top = top + "px ";
P1.style. left = left + "px ";
}
// Add a mouse lift event
P1.onmouseup = function (){
// Clear the event
Document. onmousemove = null;
P1.onmouseup = null;
}
}
}
Script

Yeah, use object-oriented implementation

The Code is as follows:

Js Draggle class:

The Code is as follows:

Function Drag (id ){
This. p = document. getElementById (id );
If (this. p ){
This. p. style. cursor = "move ";
This. p. style. position = "absolute ";
}
This. disX = 0;
This. disY = 0;
Var _ this = this;
This. p. onmousedown = function (evt ){
_ This. getDistance (evt );
Document. onmousemove = function (evt ){
_ This. setPosition (evt );
}
_ This. p. onmouseup = function (){
_ This. clearEvent ();
}
}
}
Drag. prototype. getDistance = function (evt ){
Var oEvent = evt | event;
This. disX = oEvent. clientX-this. p. offsetLeft;
This. disY = oEvent. clientY-this. p. offsetTop;
}
Drag. prototype. setPosition = function (evt ){
Var oEvent = evt | event;
Var l = oEvent. clientX-this. disX;
Var t = oEvent. clientY-this. disY;
If (l <= 0 ){
L = 0;
}
Else if (l> = document.doc umentElement. clientWidth-this. p. offsetWidth ){
L = document.doc umentElement. clientWidth-this. p. offsetWidth;
}
If (t <= 0 ){
T = 0;
}
Else if (t> = document.doc umentElement. clientHeight-this. p. offsetHeight ){
T = document.doc umentElement. clientHeight-this. p. offsetHeight;
}
This. p. style. left = l + "px ";
This. p. style. top = t + "px ";
}
Drag. prototype. clearEvent = function (){
This. p. onmouseup = null;
Document. onmousemove = null;
}

At last: the final implementation:

The Code is as follows:

Window. onload = function (){
New Drag ("p1 ");
New Drag ("p2 ");
}

The effect is as follows:

The above is all the content of this article, hoping to help you better master javascript.