JS implementation Drag-and-drop closure function Detailed introduction

JS Drag

Adopt simple closure Implementation method

The code is 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 ()"