Ide Umum untuk JS Menyeret
1. Simulasi peristiwa di awal hambatan, menyeret, dan menyeret berakhir melalui onmousedown, onmouseMove, dan OnmouseUp masing -masing ().
Jika acara sentuh telepon masing -masing adalah OnTouchStart, Ontouchmove dan Ontouchend.
2. Ketika peristiwa onmousedown terjadi ketika mouse ditekan: dapatkan posisi mouse, dapatkan posisi elemen yang diseret, dan catat perbedaan antara koordinat vertikal dan horizontal (). Bind The OnmouseMove, acara OnMouseUp ke elemen dokumen.
Ketika saya pertama kali mulai menghubungi JS menyeret, yang saya bertanya -tanya adalah mengapa itu terikat pada dokumen alih -alih elemen yang diseret? Ternyata jika elemen yang diseret terikat ke elemen yang diseret, ketika mouse diseret terlalu cepat, itu akan menyebabkan mouse terlepas dari elemen yang diseret.
3. Ketika peristiwa OnMouseMove terjadi ketika mouse menyeret: Ubah posisi elemen yang diseret ke posisi absolut. Dapatkan posisi mouse, kurangi perbedaan koordinat horizontal yang disimpan pada Langkah 2 sebagai nilai kiri elemen yang diseret, dan kurangi koordinat vertikal yang disimpan pada Langkah 2 dari koordinat mouse x (E.Clienty) dari koordinat vertikal yang disimpan di Langkah 2 Perbedaannya adalah nilai teratas dari elemen yang diseret. Menerapkan efek elemen yang mengikuti hambatan mouse.
4. Saat peristiwa OnMouseUp terjadi saat tombol mouse ditekan: Clear OnMouseMove dan OnMouseUp Event
Perpustakaan Kelas Dom-Drag Drag dan Drop-In Plug-In (Penulis: Aaron Boodman)
Kode sumber adalah sebagai berikut
Salinan kode adalah sebagai berikut:
/*Di mana (dom-drag.js) file ***************************************** ********** ************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
********************************************** *******
* 10.28.2001 - Memperbaiki bug minor di mana acara
* Terkadang menembakkan pegangan, bukan akarnya.
********************************************** ******* /
var drag = {
OBJ: NULL,
Init: Fungsi (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! = 'Tidak Ditentukan'?
o.miny = Typeof Miny! = 'Tidak Ditentukan'?
o.maxx = typeof maxx! = 'tidak terdefinisi'?
O.Maxy = TypeOf Maxy! = 'Tidak Ditentukan'?
o.xmapper = fxmapper?
o.ymapper = fymapper?
o.root.ondragStart = function baru ();
o.root.ondragend = fungsi baru ();
o.root.ondrag = fungsi baru ();
},
Mulai: Fungsi (e)
{
var o = drag.obj = ini;
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;
} kalau tidak {
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;
} kalau tidak {
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;
mengembalikan false;
},
seret: fungsi (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?
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));
if (o.xmapper) nx = o.xmapper (y)
lain jika (o.ymapper) ny = o.ymapper (x)
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);
mengembalikan 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: fungsi (e)
{
if (typeof e == 'tidak terdefinisi') e = window.event;
if (typeof e.layerx == 'tidak terdefinisi') e.layerx = e.offsetx;
if (typeof e.layery == 'tidak terdefinisi') e.layery = e.offsety;
mengembalikan e;
}
};
2: Seret dan jatuhkan penyortiran juga merupakan efek umum
Ide Implementasi Umum
1. Konversi elemen yang diseret dengan mengklik dan menyeret ke jalur absolut, dan buat elemen sementara baru untuk menggantikan lokasinya.
2. Selama proses pergerakan, hitung hubungan posisi antara mouse dan elemen yang tersisa melalui loop.
3. Di ujungnya, masukkan elemen yang diseret di depan elemen sementara dan hapus elemen sementara.
Ada blogger Leng Yue secara diam -diam ditulis oleh yang cukup bagus di internet.
Berikut ini adalah kodenya
Salinan kode adalah sebagai berikut:
(function (win, doc) {
var _this = null;
var info = {};
var list = [];
var sortable = function (opts) {
this.opts = opts;
_THIS = ini;
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) {
kasus 'mousedown':
X.hasclass (target, _this.opts.sortclass) && _this.downevent.call (_this, e, target);
merusak;
kasus 'mousemove':
info.dobj && _this.moveevent.call (_this, e, target);
merusak;
kasus 'mouseup':
info.dobj && _this.upevent.call (_this, e, target);
merusak;
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?
info.dobj.style.left = e.clientx - info.dobj.x +'px';
info.dobj.style.top = e.clienty - info.dobj.y +'px';
untuk (var i = 0; i <list.length; i ++) {
if (daftar [i] === info.dobj) {
melanjutkan;
}
var off = x.getoffset (daftar [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:
Daftar [i] .parentnode.insertbefore (info.vobj, daftar [i]);
merusak;
case! List [i] .NextSibling:
Daftar [i] .parentnode.appendChild (info.vobj);
merusak;
bawaan:
Daftar [i] .parentnode.insertbefore (info.vobj, daftar [i] .nextsibling);
merusak;
}
}
}
},
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;
}) (jendela, dokumen);