แนวคิดทั่วไปสำหรับการลาก 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-Dom-Dom-Dom-Dom-Dom ที่ได้รับความนิยมมากที่สุด (ผู้แต่ง: Aaron Boodman)
ซอร์สโค้ดมีดังนี้
การคัดลอกรหัสมีดังนี้:
/*ไฟล์ (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! = 'undefined'?
o.miny = typeof miny! = 'undefined'?
o.maxx = typeof maxx! = 'undefined'? maxx: null;
o.maxy = typeof maxy! = 'undefined'?
o.xmapper = fxmapper? fxmapper: null;
O.ymapper = fymapper?
o.root.ondragstart = ฟังก์ชั่นใหม่ ();
o.root.ondragend = ฟังก์ชั่นใหม่ ();
o.root.ondrag = ฟังก์ชั่นใหม่ ();
-
เริ่มต้น: ฟังก์ชั่น (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;
ถ้า (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.maxmouseey = -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)
-
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;
ถ้า (O.Minx! = null) ex = o.hmode?
ถ้า (O.Maxx! = null) ex = o.hmode?
ถ้า (O.Miny! = null) EY = O.VMode?
ถ้า (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 (x)
drag.obj.style [o.hmode?
drag.obj.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.style [drag.obj.hmode? "ซ้าย": "ขวา"]),
parseint (drag.obj.root.style [drag.obj.vmode? "top": "bottom"]));
drag.obj = null;
-
fixe: ฟังก์ชั่น (e)
-
if (typeof e == 'undefined') e = window.event;
if (typeof e.layerx == 'undefined') e.layerx = e.offsetx;
ถ้า (typeof e.layery == 'undefined') e.layery = e.offsety;
กลับ E;
-
-
2: การจัดเรียงการลากและวางก็เป็นเอฟเฟกต์ทั่วไป
แนวคิดการใช้งานทั่วไป
1. แปลงองค์ประกอบที่ถูกลากโดยคลิกและลากไปยังเส้นทางที่แน่นอนและสร้างองค์ประกอบชั่วคราวใหม่เพื่อแทนที่ตำแหน่ง
2. ในระหว่างกระบวนการเคลื่อนไหวให้คำนวณความสัมพันธ์ตำแหน่งระหว่างเมาส์และองค์ประกอบที่เหลือผ่านลูป
3. ในตอนท้ายให้แทรกองค์ประกอบที่ถูกลากไว้ด้านหน้าขององค์ประกอบชั่วคราวและลบองค์ประกอบชั่วคราว
มีบล็อกเกอร์ Leng Yue เขียนโดยคนที่ค่อนข้างดีบนอินเทอร์เน็ต
ต่อไปนี้เป็นรหัส
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น (win, doc) {
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);
-
Sortable.prototype = {
HandleEvent: ฟังก์ชั่น (เหตุการณ์) {
var e = เหตุการณ์ || win.event;
var target = event.target || event.srelement;
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, target) {
info.dobj = เป้าหมาย;
var off = x.getOffset (เป้าหมาย);
target.x = e.clientx - ปิด [0];
target.y = e.clienty - ปิด [1];
target.style.position = 'Absolute';
target.style.left = ปิด [0] +'px';
target.style.top = ปิด [1] +'px';
info.vobj = doc.createElement ('div');
info.vobj.style.width = ปิด [2] +'px';
info.vobj.style.height = ปิด [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 (list [i] === info.dobj) {
ดำเนินการต่อ;
-
var off = x.getOffset (รายการ [i]);
ถ้า (e.clientx> ปิด [0] && e.clientx <ปิด [0] + ปิด [2] && e.clienty> ปิด [1] && e.clienty <ปิด [1] + ปิด [3]) {
สลับ (จริง) {
กรณี e.clienty <(ปิด [1] + ปิด [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 = 'คงที่';
info.vobj.parentnode.insertbefore (info.dobj, info.vobj);
info.dobj.parentnode.removeChild (info.vobj);
info = {};
-
-
win.sortable = cortable;
}) (หน้าต่างเอกสาร);