Idéias comuns para arrastar JS
1. Simule os eventos no início do arrasto, arrastar e arrastar o final através de OnMousedown, OnMouseMove e OnMouseUp, respectivamente ().
Se o evento Touch do telefone for otechstart, OnTouchmove e OnTouchend, respectivamente.
2. Quando o evento OnMousedown ocorre quando o mouse é pressionado: obtenha a posição do mouse, obtenha a posição do elemento arrastado e registre a diferença entre as coordenadas verticais e horizontais (). Ligue o evento OnMouseMove, OnMouseUp ao elemento do documento.
Quando comecei a entrar em contato com o JS arrastando, o que eu estava pensando era por que estava ligado ao documento em vez do elemento arrastado? Acontece que, se o elemento arrastado estiver ligado ao elemento arrastado, quando o mouse for arrastado muito rápido, fará com que o mouse se destace do elemento arrastado.
3. Quando o evento OnMouseMove ocorre quando o mouse arrasta: altere a posição do elemento arrastado para a posição absoluta. Obtenha a posição do mouse, subtraia a diferença de coordenadas horizontais armazenada na etapa 2 como o valor esquerdo do elemento arrastado e subtraia a coordenada vertical armazenada na etapa 2 da coordenada X do mouse (e.clienty) da coordenada vertical armazenada na etapa 2 A diferença é o valor superior do elemento arrastado. Implemente o efeito dos elementos seguindo o arrasto do mouse.
4. Quando o evento OnMouseUp ocorre quando o botão do mouse é pressionado: Limpe o OnMouseMove e o OnMouseUp Events
A biblioteca de classes Dom-Drag Plug-In mais popular (Autor: Aaron Boodman)
O código -fonte é o seguinte
A cópia do código é a seguinte:
/*Where (dom-drag.js) arquivo ******************************************* ********** ************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************** *******
* 10.28.2001 - Corrigido um inseto menor onde os eventos
* Às vezes disparava a alça, não a raiz.
**************************************************** ******* /
var drag = {
obj: nulo,
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! = 'Undefinido'?
O.Miny = TypeOf miny! = 'Undefinido'?
O.Maxx = Typeof maxx! = 'Undefinido'?
O.maxy = typeof maxy! = 'indefinido'?
o.xmapper = fxmapper?
O.ymapper = Fymapper?
o.root.ondragstart = new function ();
o.root.ondRagend = new function ();
o.root.ondrag = new function ();
},
Iniciar: Função (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;
} outro {
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;
} outro {
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;
retornar falso;
},
arrastar: função (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)
caso contrário
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);
retornar falso;
},
fim: function ()
{
document.onMousEmove = null;
document.onmouseup = null;
Drag.obj.root.ondragend (parseint (drag.obj.root.style [drag.obj.hmode? "Esquerda": "direita"]),
parseint (drag.obj.root.style [drag.obj.vmode? "Top": "Bottom"]));
Drag.obj = null;
},
Fixe: function (e)
{
if (tipo de e == 'indefinido') e = window.event;
if (typeof e.layerx == 'indefinido') e.layerx = e.OffSetX;
if (typeof e.layery == 'indefinido') e.layery = e.offsety;
retornar e;
}
};
2: A classificação de arrastar e soltar também é um efeito comum
Idéias de implementação comuns
1. Converta o elemento arrastado clicando e arrastando para um caminho absoluto e crie um novo elemento temporário para substituir sua localização.
2. Durante o processo de movimento, calcule a relação posicional entre o mouse e os elementos restantes através dos loops.
3. No final, insira o elemento arrastado na frente do elemento temporário e exclua o elemento temporário.
Há um blogueiro Leng Yue silenciosamente escrito por uma boa na internet.
A seguir é o seu código
A cópia do código é a seguinte:
(function (win, doc) {
var _This = null;
var info = {};
var lista = [];
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, 'mouseup', this.HandleEvent);
};
STORLABLE.PROTOTYPE = {
HandleEvent: function (Event) {
var e = evento || win.event;
VAR Target = Event.Target || Event.srcelement;
switch (event.type) {
Caso 'Mousedown':
X.hasclass (Target, _this.opts.sortclass) && _this.downEvent.Call (_This, E, Target);
quebrar;
case 'mousemove':
info.dobj && _this.moveEvent.Call (_This, e, Target);
quebrar;
case 'mouseup':
info.dobj && _this.upevent.Call (_This, e, Target);
quebrar;
Padrão: quebra;
}
},
DownEvent: function (e, alvo) {
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.insertFore (info.vobj, Target);
},
movevent: function (e, destino) {
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:
lista [i] .parentnode.insertBefore (info.vobj, list [i]);
quebrar;
case! List [i] .Nextsibling:
lista [i] .parentnode.appendChild (info.vobj);
quebrar;
padrão:
lista [i] .parentnode.insertBefore (info.vobj, list [i] .nextSibling);
quebrar;
}
}
}
},
upEvent: function (e, destino) {
info.dobj.style.position = 'static';
info.vobj.parentnode.insertBefore (info.dobj, info.vobj);
info.dobj.parentnode.removechild (info.vobj);
info = {};
}
};
win.sortable = classificável;
}) (janela, documento);