SoFunction
Updated on 2025-03-01

JS implementation drag and drop closure function detailed introduction


/**
* Created with JetBrains WebStorm.
* User: lsj
* Date: 12-11-24
* Time: 12:59 pm
* To change this template use File | Settings | File Templates.
*/
var dragmanager=(function()
{
//Identify the z-axis coordinates of moving elements
var index_z=1;
//The current drag element
var drganow;
//Move identifier
var dragbegin=false;
//The distance to the left of the div when clicking the mouse
var relativex=0;
//The distance from the div when clicking the mouse
var relativey=0;
//Identify whether the mouse is moved out
var isout=false;
return {
/**
* Bind the mouse to file an event for the document, which mainly prevents the mouse from jumping out of the el area when it moves too quickly
*/
bingDocOnMouseUp:function()
{
//Register global onmouseup event, which mainly prevents the mouse from moving too fast, causing the mouse and el to be out of sync
=function(e)
{
var ev = || e;
if(isout && dragbegin)
{
//Change the relative position of the div
= (-relativex)+'px';
=(-relativey)+'px';
='normal';
dragbegin=false;
isout=false;
}
}
},
/**
* Binding event to injected elements
* @param el
*/
registerElementEv:function(element)
{
=function(e)
{
var ev = || e;
var clientx=;
var clienty= ;
var left= parseInt((0, ("p")));
var top= parseInt((0, ("p")));
relativex=clientx-left;
relativey=clienty-top;
index_z++;
=index_z;
drganow=this;
dragbegin=true;
}
=function(e)
{
var ev = || e;
//Start dragging
if(dragbegin)
{
//Change the relative position of the div
= (-relativex)+'px';
=(-relativey)+'px';
='move';
}
}
=function(e)
{
isout=true;
}
=function(e)
{
var ev = || e;
if(dragbegin)
{
//Change the relative position of the div
= (-relativex)+'px';
=(-relativey)+'px';
='normal';
dragbegin=false;
}
}
}
}
})();