Häufige Ideen für JS Ziehen
1. Simulieren Sie die Ereignisse zu Beginn des Drags, Ziehens und Ziehens durch OnmouseDown, Onmousemove bzw. OnmouseUp ().
Wenn das Touch -Ereignis des Telefons OnTouchstart, Ontouchmove bzw. OnTouchend ist.
2. Wenn das OnmouseDown -Ereignis auftritt, wenn die Maus gedrückt wird: Holen Sie sich die Mausposition, holen Sie sich die Position des gezogenen Elements und zeichnen Sie den Unterschied zwischen vertikalen und horizontalen Koordinaten auf (). Binden Sie das Onmousemove -Ereignis an das Dokumentelement.
Als ich anfing, mich zum ersten Mal zu kontaktieren, wobei ich mich wundte, war es, warum es an das Dokument gebunden war, anstatt auf das gedrückte Element? Es stellt sich heraus, dass, wenn das gezogene Element an das gezogene Element gebunden ist und die Maus zu schnell gezogen wird, die Maus von dem geschleppten Element löst.
3. Wenn das Onmousemove -Ereignis auftritt, wenn die Maus zieht: Ändern Sie die Position des gezogenen Elements in die absolute Position. Holen Sie sich die Mausposition, subtrahieren Sie die in Schritt 2 gespeicherte horizontale Koordinatendifferenz als linke Wert des gezogenen Elements und subtrahieren Der Unterschied ist der Top -Wert des gezogenen Elements. Implementieren Sie die Auswirkung von Elementen nach dem Maus -Widerstand.
4. Wenn das OnmouseUp -Ereignis auftritt, wenn die Maustaste gedrückt wird: Löschen Sie Onmousemove- und OnmouseUp -Ereignisse
Die beliebteste Drag & Drop-Plug-in-DOM-DRAG-Klassenbibliothek (Autor: Aaron Boodman)
Der Quellcode ist wie folgt
Die Codekopie lautet wie folgt:
/*WO (DOM-DRAG.JS) Datei **************************************************************** **************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
******************************************************** *******
* 10.28.2001 - Es wurde ein kleiner Fehler angehoben, bei dem Ereignisse Ereignisse
* Manchmal vom Griff abgefeuert, nicht die Wurzel.
******************************************************** ******* /
var drag = {
OBJ: NULL,
init: function (o, ooot, minx, maxx, miny, maxy, bswaphorzref, bswapvertref, fxmapper, fymapper)
{
O.onmousedown = Drag.Start;
O.HMODE = BSWAPHORZREF?
O.VMODE = BSWAPVERTREF?
o.root = orot && orot! = 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'?
o.maxy = typeof maxy! = 'undefined'?
o.xmapper = fxmapper?
O.YMAPPER = FYMAPPER?
o.root.ondragstart = new Function ();
o.root.ondragend = new Function ();
o.root.ondrag = new Function ();
},
Start: Funktion (e)
{
var o = drag.obj = this;
e = drag.fixe (e);
var y = parseInt (o.vmode?
var x = parseInt (O.HMODE? O.ROT.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!
if (o.maxx!
} anders {
if (o.Minx! = null) o.maxMousex = -O.Minx + e.clientx + x;
if (o.maxx!
}
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;
} anders {
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 zurückgeben;
},
Drag: Funktion (e)
{
e = drag.fixe (e);
var o = drag.obj;
var ey = e.clienty;
var ex = e.clientx;
var y = parseInt (o.vmode?
var x = parseInt (O.HMODE? O.ROT.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)
sonst wenn (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);
false zurückgeben;
},
Ende: function ()
{
document.onmousemove = null;
document.onmouseUp = null;
Drag.obj.root.ondragend (ParseInt (Drag.obj.root.Style [Drag.obj.Hmode? "Links": "rechts"]),
parseInt (drag.obj.root.style [drag.obj.vmode? "top": "boden"]));
Drag.obj = null;
},
Fixe: Funktion (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;
Rückkehr e;
}
};
2: Die Sortierung des Drag -and -Drop -Sortierens ist ebenfalls ein häufiger Effekt
Gemeinsame Implementierungsideen
1. Konvertieren Sie das Element, das durch Klicken und Ziehen in einen absoluten Pfad gezogen wird, und erstellen Sie ein neues temporäres Element, um seinen Standort zu ersetzen.
2. Berechnen Sie während des Bewegungsprozesses die Positionsbeziehung zwischen der Maus und den verbleibenden Elementen durch Schleifen.
3. Fügen Sie am Ende das gezogene Element vor das temporäre Element ein und löschen Sie das temporäre Element.
Es gibt einen Blogger Leng Yue, der von einem ziemlich guten im Internet geschrieben wurde.
Das Folgende ist sein Code
Die Codekopie lautet wie folgt:
(Funktion (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, 'mauseup', this.HandleEvent);
};
Sortable.Prototype = {
HandleEvent: Funktion (Ereignis) {
var e = Ereignis || Win.Event;
var target = event.target || event.srcelement;
Switch (Event.Type) {
Fall 'Mousedown':
X.HasClass (Ziel, _this.opts.sortClass) && _this.downevent.call (_this, e, target);
brechen;
Fall 'Mousemove':
info.dobj && _this.movevent.call (_this, e, target);
brechen;
Fall 'Mauseup':
info.dobj && _this.upevent.call (_this, e, target);
brechen;
Standard: Break;
}
},
Downvent: Funktion (e, Ziel) {
info.dobj = Ziel;
var off = x.getoffset (Ziel);
target.x = e.clientx - aus [0];
target.y = e.clienty - off [1];
target.Style.position = 'absolut';
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';
Ziel.Parentnode.insertBefore (info.vobj, Ziel);
},
MoveEvent: Funktion (e, Ziel) {
win.getSelection?
info.dobj.style.left = e.clientx - info.dobj.x +'px';
info.dobj.style.top = e.clienty - info.dobj.y +'px';
für (var i = 0; i <list.length; i ++) {
if (list [i] === info.dobj) {
weitermachen;
}
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) {
Fall E.Clienty <(aus [1] + Aus [3]) / 2:
Liste [i] .ParentNode.insertBefore (info.vobj, Liste [i]);
brechen;
Fall! LIST [i] .Nextsibling:
Liste [i] .ParentNode.AppendChild (info.vobj);
brechen;
Standard:
Liste [i] .Parentnode.insertbefore (info.vobj, list [i] .NextSsibling);
brechen;
}
}
}
},
UPEVENT: Funktion (e, Ziel) {
info.dobj.style.position = 'static';
info.vobj.parentnode.insertbefore (info.dobj, info.vobj);
info.dobj.parentnode.removechild (info.vobj);
info = {};
}
};
win.sortable = sortierbar;
}) (Fenster, Dokument);