الأفكار الشائعة لسحب JS
1. محاكاة الأحداث في بداية السحب ، السحب ، والسحب من خلال Onmousedown ، OnMousemove ، و OnMouseup على التوالي ().
إذا كان حدث اللمس للهاتف OnTouchStart و OnTouchMove و OnTouchend على التوالي.
2. عندما يحدث حدث onmousedown عند الضغط على الماوس: احصل على موضع الماوس ، واحصل على موضع العنصر الموسع ، وتسجيل الفرق بين الإحداثيات الرأسية والأفقية (). ربط حدث onMousemove ، onMouseup بعنصر المستند.
عندما بدأت الاتصال بـ JS Dragging لأول مرة ، ما كنت أتساءل عنه هو السبب في أنه كان مرتبطًا بالوثيقة بدلاً من العنصر الذي تم سحبه؟ اتضح أنه إذا كان العنصر الذي تم سحبه مرتبطًا بالعنصر الذي تم سحبه ، عندما يتم سحب الماوس بسرعة كبيرة ، فإنه سيؤدي إلى انفصال الماوس من العنصر الذي تم سحبه.
3. عندما يحدث حدث OnMousemove عندما يجر الفأر: قم بتغيير موضع العنصر المطلق إلى الموضع المطلق. احصل على موضع الماوس ، وطرح الفرق الأفقي للإحداثيات المخزنة في الخطوة 2 كقيمة اليسرى لعنصر السحب ، وطرح الإحداثيات العمودية المخزنة في الخطوة 2 من إحداثيات الماوس X (E.Clienty) من الإحداثيات الرأسية المخزنة في الخطوة 2 الفرق هو القيمة العليا لعنصر السحب. تنفيذ تأثير العناصر بعد سحب الماوس.
4. عندما يحدث حدث onMouseup عند الضغط على زر الماوس: أحداث onMousemove و OnMouseup
مكتبة فئة DOM-DRAG الأكثر شعبية في السحب والإسقاط (المؤلف: آرون بودمان)
رمز المصدر كما يلي
نسخة الكود كما يلي:
/*حيث (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؟
O.Vmode = bswapvertref؟
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! = "غير محدد"؟
O.Miny = typeof miny! = "غير محدد"؟
O.Maxx = typeof maxx! = "غير محدد"؟
O.Maxy = typeof maxy! = "غير محدد"؟
O.XMAPPER = FXMAPPER؟
o.ymapper = fymapper؟
o.root.ondragstart = new function () ؛
o.root.ondragend = new function () ؛
o.root.ondrag = new function () ؛
} ،
ابدأ: وظيفة (هـ)
{
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 ؛
العودة كاذبة
} ،
السحب: وظيفة (هـ)
{
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؟
if (O.Maxx! = null) ex = o.hmode؟
if (o.miny! = null) ey = o.vmode؟
if (o.maxy! = null) ey = o.vmode؟
nx = x + ((ex - o.lastmousex) * (o.hmode؟ 1: -1)) ؛
NY = y + ((ey - o.lastmousey) * (o.vmode؟ 1: -1)) ؛
إذا (O.xmapper) nx = o.xmapper (y)
آخر إذا (O.Ymapper) NY = O.YMAPPER
drag.obj.root.style [o.hmode؟
drag.obj.root.style [o.vmode؟
drag.obj.lastmousex = ex ؛
drag.obj.lastmousey = ey ؛
drag.obj.root.ondrag (NX ، NY) ؛
العودة كاذبة
} ،
النهاية: وظيفة ()
{
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 ؛
} ،
إصلاح: وظيفة (هـ)
{
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 ؛
إرجاع ه ؛
}
} ؛
2: فرز السحب والإفلات هو أيضًا تأثير شائع
أفكار التنفيذ المشتركة
1. قم بتحويل العنصر الذي يتم سحبه عن طريق النقر والسحب إلى مسار مطلق ، وإنشاء عنصر مؤقت جديد لاستبدال موقعه.
2. أثناء عملية الحركة ، احسب العلاقة الموضعية بين الماوس والعناصر المتبقية من خلال الحلقات.
3. في النهاية ، أدخل العنصر المجرد أمام العنصر المؤقت وحذف العنصر المؤقت.
هناك مدون Leng Yue مكتوب بصمت من قبل واحد جيد على الإنترنت.
ما يلي هو رمزها
نسخة الكود كما يلي:
(الوظيفة (الفوز ، المستند) {
var _this = null ؛
var info = {} ؛
var list = [] ؛
var sortable = function (opts) {
this.Opts = opts ؛
_ هذا = هذا ؛
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) ؛
} ؛
fortable.prototype = {
مقبض: وظيفة (حدث) {
var e = event || win.event ؛
var target = event.target || event.srcelement ؛
التبديل (event.type) {
حالة "موسى":
X.HasClass (Target ، _this.opts.sortClass) && _this.downevent.call (_This ، e ، target) ؛
استراحة؛
حالة "mousemove":
info.dobj && _this.moveevent.call (_This ، E ، Target) ؛
استراحة؛
حالة "Mouseup":
info.dobj && _this.upevent.call (_This ، e ، target) ؛
استراحة؛
الافتراضي: استراحة ؛
}
} ،
DownEvent: Function (E ، Target) {
info.dobj = الهدف ؛
var off = x.getOffSet (Target) ؛
target.x = e.clientx - Off [0] ؛
target.y = e.clienty - Off [1] ؛
Target.Style.position = 'aboRALUTE' ؛
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؟
info.dobj.style.left = e.clientx - info.dobj.x +'px' ؛
info.dobj.style.top = e.clienty - info.dobj.y +'px' ؛
لـ (var i = 0 ؛ i <list.length ؛ i ++) {
if (قائمة [i] === info.dobj) {
يكمل؛
}
var off = x.getOffset (قائمة [i]) ؛
if (
التبديل (صحيح) {
الحالة e.clienty <(OFF [1] + OFF [3]) / 2:
قائمة [i] .parentNode.InsertBefore (info.vobj ، قائمة [i]) ؛
استراحة؛
القضية! قائمة [i] .nextsibling:
قائمة [i] .parentnode.appendChild (info.vobj) ؛
استراحة؛
تقصير:
قائمة [i] .parentNode.InsertBefore (info.vobj ، قائمة [i] .nextsibling) ؛
استراحة؛
}
}
}
} ،
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 = غير قابل للفرز ؛
}) (نافذة ، مستند) ؛