Ideas comunes para js arrastrando
1. Simule los eventos al comienzo de arrastrar, arrastrar y arrastrar terminando a través de Onmousedown, Onmousemove y OnMouseUp respectivamente ().
Si el evento táctil del teléfono es OnTouchStart, OnTouchmove y OnTouchend, respectivamente.
2. Cuando el evento Onmousedown ocurre cuando se presiona el mouse: obtenga la posición del mouse, obtenga la posición del elemento arrastrado y registre la diferencia entre las coordenadas verticales y horizontales (). Ate el evento OnmouseMove, OnMouseUp al elemento del documento.
Cuando comencé a contactar a JS arrastrando, lo que me preguntaba era por qué estaba vinculado al documento en lugar del elemento arrastrado. Resulta que si el elemento arrastrado está unido al elemento arrastrado, cuando el mouse se arrastra demasiado rápido, hará que el mouse se separe del elemento arrastrado.
3. Cuando el evento OnmouseMove ocurre cuando el mouse se arrastra: cambie la posición del elemento arrastrado a la posición absoluta puede cambiar la posición del elemento a través de la izquierda y la parte superior, de modo que el elemento se mueve con el arrastre del mouse. Obtenga la posición del mouse, reste la diferencia de coordenadas horizontal almacenada en el paso 2 como el valor izquierdo del elemento arrastrado, y reste la coordenada vertical almacenada en el paso 2 de la coordenada x del mouse (e.clienty) de la coordenada vertical almacenada en el paso 2 . La diferencia es el valor superior del elemento arrastrado. Implemente el efecto de los elementos después del arrastre del mouse.
4. Cuando se produce el evento en Mouseup cuando se presiona el botón del mouse: Clear OnMouseMove y On MouseUp Events
La biblioteca de clases DOM-DRAG de DOM-DRAG más popular de arrastrar y soltar (Autor: Aaron Boodman)
El código fuente es el siguiente
La copia del código es la siguiente:
/*Where (dom-drag.js) archivo ************************************************ ********** **************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
************************************************************ *******
* 10.28.2001 - Se corrigió un error menor donde eventos
* A veces disparaba el mango, no la raíz.
************************************************************ ******* /
var drag = {
OBJ: NULL,
Init: Función (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'?
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 ();
},
Inicio: función (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;
} demás {
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;
} demás {
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;
devolver falso;
},
Arrast: función (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);
devolver falso;
},
End: function ()
{
document.onmouseMove = null;
document.onmouseUp = null;
Drag.obj.root.ondragend (parseint (drag.obj.root.style [drag.obj.hmode? "Izquierda": "derecho"]),
parseint (drag.obj.root.style [drag.obj.vmode? "top": "fondo"]));
Drag.obj = nulo;
},
Fixe: función (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;
regresar e;
}
};
2: La clasificación de arrastre y caída también es un efecto común
Ideas de implementación comunes
1. Convierta el elemento que se arrastra haciendo clic y arrastrando a una ruta absoluta, y cree un nuevo elemento temporal para reemplazar su ubicación.
2. Durante el proceso de movimiento, calcule la relación posicional entre el mouse y los elementos restantes a través de bucles.
3. Al final, inserte el elemento arrastrado frente al elemento temporal y elimine el elemento temporal.
Hay un blogger Leng Yue escrito en silencio por uno bastante bueno en Internet.
El siguiente es su código
La copia del código es la siguiente:
(función (win, doc) {
var _This = null;
Var info = {};
var list = [];
var sortable = function (opts) {
this.opts = opts;
_THIS = esto;
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 (evento) {
var e = evento || win.event;
VAR Target = Event.Target ||
Switch (Event.Type) {
Caso 'Mousedown':
X.hasclass (Target, _this.opts.sortclass) && _this.downevent.call (_this, e, target);
romper;
Caso 'mouseMove':
info.dobj && _this.moveevent.call (_This, e, target);
romper;
Caso 'Mouseup':
info.dobj && _this.upevent.call (_this, e, target);
romper;
predeterminado: ruptura;
}
},
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);
},
MoveVent: 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';
for (var i = 0; i <list.length; i ++) {
if (list [i] === info.dobj) {
continuar;
}
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) {
Caso E.Clienty <(OFF [1] + OFF [3]) / 2:
list [i] .ParentNode.insertbefore (info.vobj, list [i]);
romper;
Caso! Lista [i] .nextsibling:
Lista [i] .ParentNode.AppendChild (info.vobj);
romper;
por defecto:
Lista [i] .ParentNode.insertbefore (info.vobj, list [i] .nextsibling);
romper;
}
}
}
},
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;
}) (ventana, documento);