Js Implementation of the drag closure function detailed introduction _ javascript skills

During the development process, JavaScript may be used to implement drag-and-drop functions. This article will introduce this issue in depth. For more information, see Js drag

Simple closure implementation

The 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;
// Left distance from p when you click the mouse
Var relativex = 0;
// Distance from the top p when the mouse clicks
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 p
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 p
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 p
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 ()"