Common ideas for js dragging
1. Simulate the events at the beginning of drag, dragging, and dragging ending through onmousedown, onmousemove, and onmouseup respectively ().
If the touch event of the phone is ontouchstart, ontouchmove and ontouchend respectively.
2. When the onmousedown event occurs when the mouse is pressed: get the mouse position, get the position of the dragged element, and record the difference between the vertical and horizontal coordinates (). Bind the onmousemove, onmouseup event to the document element.
When I first started to contact js dragging, what I was wondering about was why it was bound to the document instead of the dragged element? It turns out that if the dragged element is bound to the dragged element, when the mouse is dragged too fast, it will cause the mouse to detach from the dragged element.
3. When the onmousemove event occurs when the mouse drags: change the position of the dragged element to the absolute position. This can change the position of the element through left and top, so that the element moves with the drag of the mouse. Get the mouse position, subtract the horizontal coordinate difference stored in step 2 as the left value of the dragged element, and subtract the vertical coordinate stored in step 2 from the mouse x coordinate (e.clientY) from the vertical coordinate stored in step 2. The difference is the top value of the dragged element. Implement the effect of elements following the mouse drag.
4. When the onmouseup event occurs when the mouse button is pressed: clear onmousemove and onmouseup events
The most popular drag and drop plug-in dom-drag class library (author: Aaron Boodman)
The source code is as follows
The code copy is as follows:
/*Where (dom-drag.js) file************************************************* ************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
*********************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
********************************************************* /
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
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' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.maxX = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : 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;
} else {
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;
} else {
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;
return false;
},
drag : function(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 ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
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 ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(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;
return e;
}
};
2: Drag and drop sorting is also a common effect
Common implementation ideas
1. Convert the element that is dragged by clicking and dragging into an absolute path, and create a new temporary element to replace its location.
2. During the movement process, calculate the positional relationship between the mouse and the remaining elements through loops. If the mouse position is in this element, insert the temporary element created in step 1 in front of nextSibling of the element;
3. At the end, insert the dragged element in front of the temporary element and delete the temporary element.
There is a blogger Leng Yue silently written by a pretty good one on the Internet. I’ll reprint its code here.
The following is its code
The code copy is as follows:
(function(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, '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);
break;
case 'mousemove':
info.dObj && _this.moveEvent.call(_this, e, target);
break;
case 'mouseup':
info.dObj && _this.upEvent.call(_this, e, target);
break;
default: break;
}
},
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 ? win.getSelection().removeAllRanges(): doc.selection.empty();
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) {
continue;
}
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]);
break;
case !list[i].nextSibling:
list[i].parentNode.appendChild(info.vObj);
break;
default:
list[i].parentNode.insertBefore(info.vObj, list[i].nextSibling);
break;
}
}
}
},
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;
})(window, document);