Js drag and drop some common ideas and methods

Common ideas of js drag

1. Use onmousedown, onmousemove, and onmouseup to simulate the events () that start dragging, dragging, and dragging respectively ().

If the Mobile Phone Touch event is ontouchstart, ontouchmove, and ontouchend, respectively.

2. When the mouse is pressed, the onmousedown event occurs: Get the mouse position, get the position of the dragged element, and record the difference between the vertical and horizontal coordinates (). Bind onmousemove and onmouseup events to the document element.

When I first started to use js drag, I wondered why I was binding the document instead of the dragged element? It turns out that if you bind the dragged element, when the mouse is dragged too fast, the mouse and the dragged element will be separated.

3. when an onmousemove event occurs, move the position of the dragged element to an absolute position. You can change the position of the element through left and top, this allows the element to move with the drag of the mouse. Obtain the mouse position, and place the x coordinate of the mouse (e. clientX) minus the abscissa difference stored in step 1 as the left value of the dragged element, move the mouse x coordinate (e. clientY) minus the ordinate difference stored in step 1 as the top value of the dragged element. Implement the effect of dragging elements with the mouse.

4. When an onmouseup event occurs when the mouse is clicked, The onmousemove and onmouseup events are cleared.

Popular drag-and-drop plug-in dom-drag class library (by Aaron Boodman)

The source code is as follows:
Copy codeThe Code is as follows:
/* Where (dom-drag.js) *************************************** ***********
* Dom-drag.js
* 09.25.2001
* Www.youngpup.net
**************************************** **********
* 10.28.2001-fixed minor bug where events
* Sometimes fired off the handle, not the root.
**************************************** **********/

Var Drag = {

Obj: null,

Init: function (o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
O. onmousedown = Drag. start;

O. hmode = bSwapHorzRef? False: true;
O. vmode = bSwapVertRef? False: true;

O. root = oRoot & oRoot! = Null? ORoot: o;

If (o. hmode & isNaN (parseInt (o. root. style. left) o. root. style. left = "0px ";
If (o. vmode & isNaN (parseInt (o. root. style. top) o. root. style. top = "0px ";
If (! O. hmode & isNaN (parseInt (o. root. style. right) o. root. style. right = "0px ";
If (! O. vmode & isNaN (parseInt (o. root. style. bottom) o. root. style. bottom = "0px ";

O. minX = typeof minX! = 'Undefined '? MinX: null;
O. minY = typeof minY! = 'Undefined '? MinY: null;
O. maxX = typeof maxX! = 'Undefined '? MaxX: null;
O. maxY = typeof maxY! = 'Undefined '? MaxY: null;

O. xMapper = fXMapper? FXMapper: null;
O. yMapper = fYMapper? FYMapper: null;

O. root. onDragStart = new Function ();
O. root. onDragEnd = new Function ();
O. root. onDrag = new Function ();
},

Start: function (e)
{
Var o = Drag. obj = this;
E = Drag. fixE (e );
Var y = parseInt (o. vmode? O. root. style. top: o. root. style. bottom );
Var x = parseInt (o. hmode? O. root. style. left: o. root. style. right );
O. root. onDragStart (x, y );

O. lastMouseX = e. clientX;
O. lastMouseY = e. clientY;

If (o. hmode ){
If (o. minX! = Null) o. minMouseX = e. clientX-x + o. minX;
If (o. maxX! = Null) o. maxMouseX = o. minMouseX + o. maxX-o. minX;
} Else {
If (o. minX! = Null) o. maxMouseX =-o. minX + e. clientX + x;
If (o. maxX! = Null) o. minMouseX =-o. maxX + e. clientX + x;
}

If (o. vmode ){
If (o. minY! = Null) o. minMouseY = e. clientY-y + o. minY;
If (o. maxY! = Null) o. maxMouseY = o. minMouseY + o. maxY-o. minY;
} Else {
If (o. minY! = Null) o. maxMouseY =-o. minY + e. clientY + y;
If (o. maxY! = Null) o. minMouseY =-o. maxY + e. clientY + y;
}

Document. onmousemove = Drag. drag;
Document. onmouseup = Drag. end;

Return false;
},

Drag: function (e)
{
E = Drag. fixE (e );
Var o = Drag. obj;

Var ey = e. clientY;
Var ex = e. clientX;
Var y = parseInt (o. vmode? O. root. style. top: o. root. style. bottom );
Var x = parseInt (o. hmode? O. root. style. left: o. root. style. right );
Var nx, ny;

If (o. minX! = Null) ex = o. hmode? Math. max (ex, o. minMouseX): Math. min (ex, o. maxMouseX );
If (o. maxX! = Null) ex = o. hmode? Math. min (ex, o. maxMouseX): Math. max (ex, o. minMouseX );
If (o. minY! = Null) ey = o. vmode? Math. max (ey, o. minMouseY): Math. min (ey, o. maxMouseY );
If (o. maxY! = Null) ey = o. vmode? Math. min (ey, o. maxMouseY): Math. max (ey, o. minMouseY );

Nx = x + (ex-o. lastMouseX) * (o. hmode? 1:-1 ));
Ny = y + (ey-o. lastMouseY) * (o. vmode? 1:-1 ));

If (o. xMapper) nx = o. xMapper (y)
Else if (o. yMapper) ny = o. yMapper (x)

Drag. obj. root. style [o. hmode? "Left": "right"] = nx + "px ";
Drag. obj. root. style [o. vmode? "Top": "bottom"] = ny + "px ";
Drag. obj. lastMouseX = ex;
Drag. obj. lastMouseY = ey;

Drag. obj. root. onDrag (nx, ny );
Return false;
},

End: function ()
{
Document. onmousemove = null;
Document. onmouseup = null;
Drag. obj. root. onDragEnd (parseInt (Drag. obj. root. style [Drag. obj. hmode? "Left": "right"]),
ParseInt (Drag. obj. root. style [Drag. obj. vmode? "Top": "bottom"]);
Drag. obj = null;
},

FixE: function (e)
{
If (typeof e = 'undefined') e = window. event;
If (typeof e. layerX = 'undefined') e. layerX = e. offsetX;
If (typeof e. layerY = 'undefined') e. layerY = e. offsetY;
Return e;
}
};

2. drag-and-drop sorting is also a common effect.

Common Implementation ideas

1. Convert the clicked drag element to an absolute path, and create a temporary element to replace its location.

2. The relationship between the mouse position and the remaining element is calculated cyclically during the movement process. If the mouse position is in this element, insert the temporary element created in step 1 before nextSibling of the element;

3. Insert the dragged element in front of the temporary element at the end to delete the temporary element.

I have a non-vocal blogger on the Internet who writes well. I will repost the code here.

The following code is used:
Copy codeThe Code is as follows:
(Function (win, doc ){
Var _ this = null;
Var info = {};
Var list = [];
Var Sortable = function (opts ){
This. opts = opts;
_ This = this;
List = X. getByClass (this. opts. sortClass, doc );
X. addEvent (doc, 'mouselow', this. handleEvent );
X. addEvent (doc, 'mousemove ', this. handleEvent );
X. addEvent (doc, 'mouseup', this. handleEvent );
};
Sortable. prototype = {
HandleEvent: function (event ){
Var e = event | win. event;
Var target = event.tar get | event. srcElement;
Switch (event. type ){
Case 'mousedown ':
X. hasClass (target, _ this. opts. sortClass) & _ this. downEvent. call (_ this, e, target );
Break;
Case 'mousemove ':
Info. dObj & _ this. moveEvent. call (_ this, e, target );
Break;
Case 'mouseup ':
Info. dObj & _ this. upEvent. call (_ this, e, target );
Break;
Default: break;
}
},
DownEvent: function (e, target ){
Info. dObj = target;
Var off = X. getOffset (target );
Target. x = e. clientX-off [0];
Target. y = e. clientY-off [1];
Target. style. position = 'absolute ';
Target. style. left = off [0] + 'px ';
Target. style. top = off [1] + 'px ';

Info. vObj = doc. createElement ('div ');
Info. vObj. style. width = off [2] + 'px ';
Info. vObj. style. height = off [3] + 'px ';
Target. parentNode. insertBefore (info. vObj, target );
},
MoveEvent: function (e, target ){
Win. getSelection? Win. getSelection (). removeAllRanges (): doc. selection. empty ();
Info. dObj. style. left = e. clientX-info. dObj. x + 'px ';
Info. dObj. style. top = e. clientY-info. dObj. y + 'px ';
For (var I = 0; I <list. length; I ++ ){
If (list [I] === info. dObj ){
Continue;
}
Var off = X. getOffset (list [I]);
If (e. clientX> off [0] & e. clientX <off [0] + off [2] & e. clientY> off [1] & e. clientY <off [1] + off [3]) {
Switch (true ){
Case e. clientY <(off [1] + off [3])/2:
List [I]. parentNode. insertBefore (info. vObj, list [I]);
Break;
Case! List [I]. nextSibling:
List [I]. parentNode. appendChild (info. vObj );
Break;
Default:
List [I]. parentNode. insertBefore (info. vObj, list [I]. nextSibling );
Break;
}
}
}
},
UpEvent: function (e, target ){
Info. dObj. style. position = 'static ';
Info. vObj. parentNode. insertBefore (info. dObj, info. vObj );
Info. dObj. parentNode. removeChild (info. vObj );
Info = {};
}
};
Win. Sortable = Sortable;
}) (Window, document );