Js Implementation of the drag Closure Function

Js drag

Simple closure implementationCopy codeThe Code is as follows :/**
* Created with JetBrains WebStorm.
* User: lsj
* Date: 12-11-24
* Time: PM
* To change this template use File | Settings | File Templates.
*/
Var dragmanager = (function ()
{
// Identify the Z axis coordinate of the moving Element
Var index_z = 1;
// The current drag Element
Var drganow;
// Move the identifier
Var dragbegin = false;
// Distance from the left side of the div when you click the mouse
Var relativex = 0;
// The distance between the cursor and the above div
Var relativey = 0;
// Identifies whether the mouse is removed
Var isout = false;
Return {
/**
* Bind the mouse to the document to raise an event, which mainly prevents the mouse from moving too quickly out of the el area.
*/
BingDocOnMouseUp: function ()
{
// Register the global onmouseup event to prevent the mouse and el from being out of sync due to excessive mouse movement.
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 injected elements to events.
* @ 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. Implemented in the form of closures to facilitate later maintenance. All the variables required for the mobile process are transferred to gridmanager.
2. During the drag process, the mouse moves too fast, causing the moving element to keep up with the mouse. Therefore, to register the document. oumouseup event, the switch of this event is triggered by the onmouseout event of the moving element.
3. During the drag operation, the select event of the browser's onmousemove may be triggered. in ie, onmousemove = "document. selection. empty ()" can be blocked ()"