JSドラッグの一般的なアイデア
1.ドラッグ、ドラッグ、ドラッグの開始時にイベントをシミュレートします。
電話のタッチイベントがそれぞれOnTouchStart、OntouchMove、OnTouchendの場合。
2.マウスが押されたときにOnMousedownイベントが発生したとき：マウスの位置を取得し、ドラッグされた要素の位置を取得し、垂直座標と水平座標の違いを記録します（）。 OnMouseMove、OnMouseUpイベントをドキュメント要素にバインドします。
私が最初にJSのドラッグに連絡し始めたとき、私が疑問に思っていたのは、なぜドラッグされた要素の代わりにドキュメントに縛られたのかということでしたか？ドラッグされた要素がドラッグされた要素に結合されている場合、マウスが速すぎると、マウスがドラッグされた要素から分離することがわかります。
3.マウスがドラッグしたときにOnmousemoveイベントが発生すると、ドラッグされた要素の位置を絶対位置に変更します。マウスの位置を取得し、ステップ2に保存されている水平座標の差をドラッグされた要素の左値として減算し、ステップ2にステップ2に保存されている垂直座標（e.clienty）からステップ2に保存された垂直座標（e.clienty）を差し引きます。 。マウスドラッグに続く元素の効果を実装します。
4.マウスボタンが押されたときにonMouseUpイベントが発生したとき：Clear onMouseMoveおよびonMouseUpイベント
最も人気のあるドラッグアンドドロッププラグインドムドラグクラスライブラリ（著者：アーロンブードマン）
ソースコードは次のとおりです
コードコピーは次のとおりです。
/*where（dom-drag.js）ファイル************************************* ********** **********
* dom-drag.js
* 09.25.2001
* www.youngpup.net
******************************************** *******
* 10.28.2001-イベントでマイナーバグを修正しました
*ルートではなく、ハンドルから発射されることがあります。
******************************************** ******* /
var drag = {
obj：null、
init：function（o、oroot、minx、maxx、miny、maxy、bswaphorzref、bswapvertref、fxmapper、fymapper）
{
o.onmousedown = drag.start;
o.hmode = bswaphorzref：true;
o.vmode = bswapvertref：true;
o.root = oroot && oroot！= null？
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！= '未定'：null;
o.miny = typeof miny！= '未定義'？
o.maxx = typeof maxx！= '未定'：null;
o.maxy = typeof maxy！= '未定義'？
o.xmapper = fxmapper：null;
o.ymapper = fymapper：null;
o.root.ondragstart = new function（）;
o.root.ondragend = new function（）;
o.root.ondrag = new function（）;
}、
開始：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;
} それ以外 {
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;
} それ以外 {
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;
falseを返します。
}、
ドラッグ：関数（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.max（ex、o.minmousex）：math.min（ex、o.maxmousex）;
if（o.maxx！= null）ex = o.hmode.min（ex、o.maxmousex）：math.max（ex、o.minmousex）;
if（o.miny！= null）ey = o.vmode.max（ey、o.minmousey）：math.min（ey、o.maxmousey）;
if（o.maxy！= null）ey = o.vmode.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？ "right"] = nx + "px";
drag.obj.root.style [o.vmode？ "bottom"] = ny + "px";
drag.obj.lastmousex = ex;
drag.obj.lastmousey = ey;
drag.obj.root.ondrag（NX、NY）;
falseを返します。
}、
終了：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;
eを返す;
}
};
2：ドラッグアンドドロップの並べ替えも一般的な効果です
一般的な実装のアイデア
1.クリックして絶対パスにドラッグすることでドラッグされる要素を変換し、その場所を置き換える新しい一時的な要素を作成します。
2。移動プロセス中に、マウスの位置を介してマウスと残りの要素との間の位置的な関係を計算します。
3。最後に、一時的な要素の前にドラッグされた要素を挿入し、一時的な要素を削除します。
ブロガーのLeng Yueは、インターネット上でかなり良いものによって書かれています。
以下はそのコードです
コードコピーは次のとおりです。
（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 ||。
var target = event.target ||。
switch（event.type）{
ケース「Mousedown」：
x.hasclass（ターゲット、_this.opts.sortclass）&& _this.downevent.call（_this、e、ターゲット）;
壊す;
ケース「Mousemove」：
info.dobj && _this.moveevent.call（_this、e、ターゲット）;
壊す;
ケース「MouseUp」：
info.dobj && _this.upevent.call（_this、e、ターゲット）;
壊す;
デフォルト：break;
}
}、
Downevent：function（e、ターゲット）{
info.dobj =ターゲット;
var off = x.getoffset（ターゲット）;
ターゲット。x= e.clientx -off [0];
ターゲット.y = e.clienty-オフ[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、ターゲット）;
}、
MoveEvent：function（e、ターゲット）{
win.getSelection？
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）{
続く;
}
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]）;
壊す;
case！list [i] .nextsibling：
list [i] .parentnode.appendchild（info.vobj）;
壊す;
デフォルト：
list [i] .parentnode.insertbefore（info.vobj、list [i] .nextsibling）;
壊す;
}
}
}
}、
Upevent：function（e、ターゲット）{
info.dobj.style.position = 'static';
info.vobj.parentnode.insertbefore（info.dobj、info.vobj）;
info.dobj.parentnode.removechild（info.vobj）;
情報= {};
}
};
win.sortable = sortable;
}）（window、document）;