Общие идеи для JS перетаскивают
1. Обратите внимание на события в начале перетаскивания, перетаскивания и перетаскивания, заканчиваясь через Onmousedown, Onmousemove и Onmouseup соответственно ().
Если событие Touch по телефону - OnTouchStart, OnTouchMove и OnTouchend соответственно.
2. Когда событие OnmouseDown происходит, когда мышь нажимается: получите положение мыши, получите положение перетаскиваемого элемента и запишите разницу между вертикальными и горизонтальными координатами (). Свяжите событие OnmouseMove, OnmouseUp с элементом документа.
Когда я впервые начал связываться с JS Draging, я задавался вопросом, почему он был связан с документом вместо перетаскиваемого элемента? Оказывается, что если перетаванный элемент связан с перетаскиваемым элементом, когда мышь перетаскивается слишком быстро, это приведет к тому, что мышь отступит от перетаскиваемого элемента.
3. Когда событие OnmouseMove происходит, когда мышь перетаскивает: измените положение перетаскиваемого элемента в абсолютное положение. Получите положение мыши, вычитайте разницу горизонтальной координат, хранящуюся на шаге 2 в качестве левого значения перетащитого элемента, и вычесть вертикальную координату, хранящуюся на шаге 2 координаты мыши x (e.clienty) из вертикальной координаты, хранящейся на этапе 2. . Реализуйте эффект элементов после сопротивления мыши.
4. Когда событие OnmouseUp происходит, когда нажата кнопка мыши: Очистить события OnmouseMove и OnmouseUp
Самая популярная библиотека классов DOM-DRAG DRAG DRAG (Автор: Аарон Будман)
Исходный код выглядит следующим образом
Кода -копия выглядит следующим образом:
/*Где (dom-drag.js) файл ***************************************** ********** ************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
********************************************* *******
* 10.28.2001 - Исправлена незначительная ошибка, где события
* Иногда стрелял из ручки, а не корень.
********************************************* ******* /
var drag = {
OBJ: NULL,
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! = 'undefined'?
o.miny = typeof miny! = 'не определен?
O.maxx = typeof maxx! = 'undefined'?
O.maxy = typeof maxy! = 'не определен?
o.xmapper = fxmapper?
o.ymapper = fymapper?
o.root.ondragstart = new Function ();
o.root.ondragend = new Function ();
o.root.ondrag = new Function ();
},
Начало: функция (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;
} еще {
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;
} еще {
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;
вернуть ложь;
},
перетаскивать: функция (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, Нью -Йорк;
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)
иначе 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);
вернуть ложь;
},
END: function ()
{
document.onmouseMove = null;
document.onmouseup = null;
Drag.obj.root.ondragend (parseint (drag.obj.root.style [Drag.obj.hmode? "" Слева ":" справа "]),
parseint (Drag.obj.root.style [Drag.obj.vmode? "Top": "внизу"]));
Drag.obj = null;
},
Исправлено: функция (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;
вернуть E;
}
};
2: Сортировка перетаскивания также является общим эффектом
Общие идеи реализации
1. Преобразуйте элемент, который перетаскивается, щелкнув и перетаскивая в абсолютный путь, и создайте новый временный элемент, чтобы заменить его местоположение.
2. Во время процесса движения рассчитайте позиционную связь между мышью и оставшимися элементами через петли.
3. В конце вставьте перетащенный элемент перед временным элементом и удалите временный элемент.
В Интернете я перепечатаю его код, который будет тихо написан блогер Ленг Юэ.
Ниже приведен его код
Кода -копия выглядит следующим образом:
(функция (Win, Doc) {
var _this = null;
var info = {};
var list = [];
var Sortable = function (opts) {
this.opts = opts;
_ Это = это;
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) {
Case 'Mousedown':
X.hasclass (target, _this.opts.sortclass) && _this.downevent.call (_this, e, target);
перерыв;
Case 'MouseMove':
info.dobj && _this.moveevent.call (_this, e, target);
перерыв;
Case 'MouseUp':
info.dobj && _this.upevent.call (_this, e, target);
перерыв;
по умолчанию: перерыв;
}
},
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';
for (var i = 0; i <list.length; i ++) {
if (list [i] === info.dobj) {
продолжать;
}
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:
список [i] .parentnode.insertbefore (info.vobj, list [i]);
перерыв;
Case! List [i].
список [i] .parentnode.appendchild (info.vobj);
перерыв;
по умолчанию:
список [i] .parentnode.insertbefore (info.vobj, list [i] .nextibling);
перерыв;
}
}
}
},
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 = сортируемый;
}) (окно, документ);