1.通过onmousedown,onmousemove,onmouseup分别模拟开始拖拽，拖拽中和拖拽结束时的事件（）。
如果手机的触摸事件的话则分别是ontouchstart,ontouchmove和ontouchend。
2.鼠标按下即发生onmousedown事件时：获取鼠标位置，获取被拖动元素的位置，记录两者之间的纵横坐标的差值（）。对document元素绑定onmousemove,onmouseup事件。
刚开始接触js拖拽时，我当时疑惑的是为什么是对document绑定而不是对被拖动的元素绑定呢？原来是如果对被拖动元素绑定的话当鼠标拖动过快时，会导致鼠标与被拖动元素的脱离。
3.鼠标拖动即发生onmousemove事件时：将被拖拽元素的position改成绝对位置，这个可以通过left和top改变该元素的位置，从而使得该元素随着鼠标的拖拽而移动。获取鼠标位置，将鼠标x坐标（e.clientx）减去第2步储存的横坐标差作为被拖动元素的left值，将鼠标x坐标（e.clienty）减去第2步储存的纵坐标差作为被拖动元素的top值。实现元素跟随鼠标拖动的效果。
4.鼠标按键弹起即发生onmouseup事件时：清空onmousemove和onmouseup事件
比较流行的拖拽插件dom-drag类库（作者： aaron boodman）
其源代码如下
复制代码 代码如下:
/*其中( dom-drag.js )文件**************************************************
* 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;
}
};
二：拖拽排序也是一种常见的效果
常见实现思路
1.将点击进行拖拽的元素转换为绝对路径，同时新建一个临时元素替代其所在的位置。
2.移动过程中通过循环计算鼠标与剩余元素的位置关系，如果鼠标位置处于该元素中时，在该元素的nextsibling前面插入第1步时创建的临时元素；
3.结束时在临时元素前面插入被拖拽元素，删除临时元素。
网上有个冷月无声博主写的挺好的，在此转载一下其代码
以下为其代码
复制代码 代码如下:
(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 if(list[i] === info.dobj) {
continue;
}
var off = x.getoffset(list[i]);
if(e.clientx > off[0] && e.clientx off[1] && e.clienty switch (true) {
case e.clienty 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);