Idées courantes pour la traînée JS
1. Simuler les événements au début de la traînée, de la traînée et de la traînée de fin à travers Onmoudown, OnMousemove et OnMouseup respectivement ().
Si l'événement tactile du téléphone est respectivement Ontouchstart, Ontouchmove et Ontouchend.
2. Lorsque l'événement OnMoudown se produit lorsque la souris est enfoncée: obtenez la position de la souris, obtenez la position de l'élément traîné et enregistrez la différence entre les coordonnées verticales et horizontales (). Lisez l'événement OnMouseMove, OnMouseUp à l'élément de document.
Quand j'ai commencé à contacter JS traîner, ce que je me demandais, c'était pourquoi il était lié au document au lieu de l'élément traîné? Il s'avère que si l'élément traîné est lié à l'élément traîné, lorsque la souris est traînée trop rapidement, cela entraînera le détachement de la souris de l'élément traîné.
3. Lorsque l'événement OnMousemove se produit lorsque la souris traîne: changez la position de l'élément traîné en position absolue. Obtenez la position de la souris, soustrayez la différence de coordonnées horizontales stockée à l'étape 2 comme valeur gauche de l'élément traîné et soustrayez les coordonnées verticales stockées à l'étape 2 de la coordonnée X de la souris (e.clienty) de la coordonnée verticale stockée à l'étape 2 . La différence est la valeur maximale de l'élément traîné. Implémentez l'effet des éléments suivant la traînée de la souris.
4. Lorsque l'événement OnMouseup se produit lorsque le bouton de la souris est enfoncé: Effacez les événements OnMouseMove et OnMouseup
La bibliothèque de classe Dom-Drag le plus populaire de glisser-déposer Dom-Drag (auteur: Aaron Boodman)
Le code source est le suivant
La copie de code est la suivante:
/ * Where (Dom-drag.js) Fichier *************************************** ********** ************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************** *******
* 10.28.2001 - Correction d'un bug mineur où les événements
* Parfois tiré de la poignée, pas la racine.
**************************************************** ******* /
var drag = {
obj: null,
Init: Fonction (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 = type de 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 ();
},
Démarrer: fonction (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;
} autre {
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;
} autre {
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;
retourne false;
},
Faites glisser: fonction (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)
else if (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);
retourne false;
},
fin: fonction ()
{
document.onMouseMove = null;
document.onmouseUp = null;
Drag.obj.root.ondragend (parseInt (drag.obj.root.style [drag.obj.hmode? "Gauche": "droite"]),
parseInt (drag.obj.root.style [drag.obj.vmode? "top": "inférieur"]);
Drag.obj = null;
},
Fixe: fonction (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;
retour e;
}
};
2: Le tri et dépôt est également un effet commun
Idées de mise en œuvre courantes
1. Convertissez l'élément qui est traîné en cliquant et en faisant glisser dans un chemin absolu, et créez un nouvel élément temporaire pour remplacer son emplacement.
2. Pendant le processus de mouvement, calculez la relation positionnelle entre la souris et les éléments restants à travers des boucles.
3. À la fin, insérez l'élément traîné devant l'élément temporaire et supprimez l'élément temporaire.
Il y a un blogueur Leng Yue écrit silencieusement par un assez bon sur Internet.
Ce qui suit est son code
La copie de code est la suivante:
(fonction (win, doc) {
var _This = null;
var info = {};
var list = [];
var sortable = fonction (opts) {
this.opts = opts;
_Cis = 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);
};
Triable.prototype = {
handleevent: fonction (événement) {
var e = événement || win.event;
var Target = event.target || event.srcelement;
switch (event.type) {
cas «Mousedown»:
X.hasclass (Target, _This.opts.sortClass) && _this.downEvent.call (_This, e, cible);
casser;
Cas «MouseMove»:
info.dobj && _this.moveEvent.call (_This, e, cible);
casser;
case «sourisp»:
info.dobj && _this.upevent.call (_This, e, cible);
casser;
par défaut: pause;
}
},
dowevent: function (e, cible) {
info.dobj = cible;
var off = x.getoffset (cible);
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, cible);
},
MoveEvent: fonction (e, cible) {
win.getSelection?
info.dobj.style.left = e.clientx - info.dobj.x + 'px';
info.dobj.style.top = e.clienty - info.dobj.y + 'px';
pour (var i = 0; i <list.length; i ++) {
if (list [i] === info.dobj) {
continuer;
}
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]);
casser;
Case! Liste [I] .NextSibling:
list [i] .parentNode.appendChild (info.vobj);
casser;
défaut:
list [i] .parentNode.insertBefore (info.vobj, liste [i] .NextSibling);
casser;
}
}
}
},
upevent: function (e, cible) {
info.dobj.style.position = 'statique';
info.vobj.parentNode.insertBefore (info.dobj, info.vobj);
info.dobj.parentnode.removechild (info.vobj);
info = {};
}
};
win.sortable = sortable;
}) (fenêtre, document);