JS Drag some common way of thinking to organize

  This article mainly introduces JS drag and drop some common ways of thinking, the need for friends can refer to the following

JS drag-and-drop common ideas     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 OnMouseDown event occurs when the mouse is pressed: 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 to 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. When the OnMouseMove event occurs when the mouse is dragged: The position of the dragged element is changed to an absolute position, which changes the position of the element by the left and top so that the element moves with the drag of the mouse. 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. When the 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)     Its source code is as follows     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, not the root.  **************************************************/    var Drag = {    Obj:n ull,    Init:function (o, Oroot, MinX, MaxX, Miny, Maxy, Bswaphorzref, Bswapvertref, Fxmapper, Fymapper)   {  O.onmousedown = drag.start;    O.hmode = bswaphorzref false:true;  o.vmode = bSwapVertRef? fa Lse: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 '!= '? 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.O Ndrag = new Function (); },    Start:function (e)   {  var o = drag.obj = this;  E = drag.fi XE (e);  var y = parseint (o.vmode? o.root.style.top:o.root.style.bottom);  var x = parseint (o.hmode? o.root.s Tyle.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;&nbsp ; 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.minmous EY =-o.maxy + e.clienty + y; }    Document.onmousemove = drag.drag;  Document.onmouseup = Drag.end;& nbsp   return false; },    drag:function (e)   {  e = Drag.fixe (e);  var o = drag.obj;&nbsp ;   var ey = e.clienty;  var ex = e.clientx;  var y = parseint (o.vmode? O.root.style.top:o.root.style.bott OM);  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)); &N Bsp NY = y + ((Ey-o.lastmousey) * (O.vmode 1:-1));    if (o.xmapper) NX = O.xmapper (y)   else if (O.ymappe r) 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;&nbsp ; 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 = ' Undefi Ned ') e = window.event;&nbsp if (typeof E.layerx = = ' undefined ') E.layerx = e.offsetx;  if (typeof e.layery = = ' undefined ') E.layery = e.offsety;& nbsp return e; } };    II: Drag-and-drop sorting is also a common effect     common implementation ideas     1. Converts the clicked element to an absolute path, Creates a new temporary element to replace its location.     2. Calculates the position of the mouse with the remaining elements by looping during the move, and if the mouse position is in the element, the temporary element;    3 that is created when the nextsibling of the element is inserted before the 1th step. Inserts the dragged element before the temporary element at the end, deleting the temporary element.     Online There is a cold month silent bloggers write very well, here reprint its code     following for its code     code is as follows: (function (Win, doc) {  var _this = null ;  var info = {};  var list = [];  var sortable = function (opts) {  this.opts = opts;  _this = th is;  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.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.st Yle.top = off[1] + ' px ';    info.vobj = doc.createelement (' div ');  info.vObj.style.width = off[2] + ' px '; &nb Sp 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.cli Entx < 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]);  Brea k;  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);