JS Drag
Adopt simple closure Implementation method
Copy Code code as follows:
/**
* Created with JetBrains webstorm.
* USER:LSJ
* date:12-11-24
* Time: 12:59
* To change this template use File | Settings | File Templates.
*/
var dragmanager= (function ()
{
Identifies the move element z-axis coordinates
var index_z=1;
Current drag and drop element
var Drganow;
Move an identity symbol
var Dragbegin=false;
When the mouse clicks away from the Div left
var relativex=0;
When the mouse clicks the distance from the div top
var relativey=0;
To identify whether the mouse is removed
var Isout=false;
return {
/**
* For document-bound mouse lift event, mainly prevent mouse movement too fast jump out of El area
*/
Bingdoconmouseup:function ()
{
Registers the global onmouseup event, mainly prevents the mouse to move too quickly causes the mouse and the El different step
Document.onmouseup=function (e)
{
var ev = Window.event | | E
if (isout && dragbegin)
{
Change the relative position of the div
Drganow.style.left= (Ev.clientx-relativex) + ' px ';
Drganow.style.top= (Ev.clienty-relativey) + ' px ';
Drganow.style.cursor= ' normal ';
Dragbegin=false;
Isout=false;
}
}
},
/**
* Bind the injected element to the event
* @param el
*/
Registerelementev:function (Element)
{
Element.onmousedown=function (e)
{
var ev = Window.event | | E
var Clientx=ev.clientx;
var clienty= ev.clienty;
var left= parseint (this.style.left.substring (0, This.style.left.indexOf ("P")));
var top= parseint (this.style.top.substring (0, This.style.top.indexOf ("P")));
Relativex=clientx-left;
Relativey=clienty-top;
index_z++;
This.style.zindex=index_z;
Drganow=this;
Dragbegin=true;
}
Element.onmousemove=function (e)
{
var ev = Window.event | | E
Start dragging
if (Dragbegin)
{
Change the relative position of the div
This.style.left= (Ev.clientx-relativex) + ' px ';
This.style.top= (Ev.clienty-relativey) + ' px ';
This.style.cursor= ' move ';
}
}
Element.onmouseout=function (e)
{
Isout=true;
}
Element.onmouseup=function (e)
{
var ev = Window.event | | E
if (Dragbegin)
{
Change the relative position of the div
Drganow.style.left= (Ev.clientx-relativex) + ' px ';
Drganow.style.top= (Ev.clienty-relativey) + ' px ';
Drganow.style.cursor= ' normal ';
Dragbegin=false;
}
}
}
}
})();
1. Using the form of closure to facilitate the maintenance of the later, the movement of the necessary variables are all transferred into the Gridmanager inside
2. Drag and drop in the process of moving the mouse too fast cause the mobile element can not keep up with the mouse movement, so to register the Document.oumouseup event, the event switch is a moving element of the onmouseout event triggered
3. Drag-and-drop process may trigger the browser itself onmousemove select events, can be shielded ie under the onmousemove= "Document.selection.empty ()"
