The common idea of JS dragging and dragging
1. By Onmousedown,onmousemove,onmouseup respectively simulate start dragging, drag and drop at the end of the event ().
If the phone's touch event is ontouchstart,ontouchmove and Ontouchend, respectively.
2. When the mouse is down, the onmousedown event occurs: Gets the mouse position, gets the position of the dragged element, and records the difference between the vertical and horizontal coordinates between the two (). Binds the Onmousemove,onmouseup event to the document element.
When I first started touching JS drag and drop, I was wondering why it was binding against the document instead of the dragged element? It turns out that if you bind to a dragged element when the mouse drags too fast, it causes the mouse to detach from the dragged element.
3. Mouse drag occurs when the OnMouseMove event: will be dragged elements of the position to absolute position, this can be left and top to change the position of the element, so that the element with the mouse drag and move. Gets the mouse position, the mouse x-coordinate (E.CLIENTX) minus the horizontal difference stored in the 2nd step as the left value of the dragged element, and the mouse x coordinate (e.clienty) minus the ordinate difference stored in the 2nd step as the top value of the dragged element. Implements the effect of the element following the mouse drag.
4. OnMouseUp event occurs when the mouse button bounces: empty onmousemove and OnMouseUp events
More popular drag-and-drop Plug-ins Dom-drag class library (author: Aaron Boodman)
The source code is as follows
Copy Code code as follows:
/* WHERE (dom-drag.js) file **************************************************
* Dom-drag.js
* 09.25.2001
* Www.youngpup.net
**************************************************
* 10.28.2001-fixed minor bug where events
* Sometimes fired off the handle and 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;
}
};
Second: Drag-and-drop sorting is also a common effect
Common Realization Ideas
1. Converts the clicked element to an absolute path and creates a new temporary element to replace its location.
2. The position of the mouse with the remaining elements is computed by looping during the movement, and if the mouse position is in the element, the temporary element created when the 1th step is inserted before the nextsibling of the element;
3. At the end, insert the dragged element before the temporary element, and delete the temporary element.
On the internet there is a cold month silent blogger wrote very good, here reprint its code
The following is its code
Copy Code code 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, ' MouseDown ', 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.target | | 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 & Lt 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);
