写代码的时候遇到需要对绝对布局的div进行拖拽的功能，起初为了省事直接在网上扒拉了一番，看到大神张鑫旭的一篇文章《JavaScript实现最简单的拖拽效果》，便直接拿来使用（膜拜大神）。但发现这段代码使用前必须设置top和left样式属性，否则拖动时div会有跳动，而且不支持多个div的拖动。于是对代码大概修改了一番，贴在这里，以备后用，希望大神勿怪。
/**
* 纯js实现多div拖拽
* @param bar, 拖拽触柄
* @param target, 可拖动窗口
* @param inWindow, 为true时只能在屏幕范围内拖拽
* @param callback, 拖拽时执行的回调函数。包含两个参数，target的left和top
* @returns {*}
* @private
*/
var startDrag = function(bar, target, /* optional */inWindow, /* optional */callback) {
(function(bar, target, callback) {
var D = document,
DB = document.body,
params = {
left: 0,
top: 0,
currentX: 0,
currentY: 0
};
if(typeof bar == "string") {
bar = D.getElementById(bar);
}
if(typeof target == "string") {
target = D.getElementById(target);
}
bar.style.cursor="move";
bindHandler(bar, "mousedown", function(e) {
e.preventDefault();
params.left = target.offsetLeft;
params.top = target.offsetTop;
if(!e){
e = window.event;
bar.onselectstart = function(){
return false;
}
}
params.currentX = e.clientX;
params.currentY = e.clientY; var stopDrag = function() {
removeHandler(DB, "mousemove", beginDrag);
removeHandler(DB, "mouseup", stopDrag);
}, beginDrag = function(e) {
var evt = e ? e: window.event,
nowX = evt.clientX, nowY = evt.clientY,
disX = nowX - params.currentX, disY = nowY - params.currentY,
left = parseInt(params.left) + disX,
top = parseInt(params.top) + disY;
if(inWindow) {
var maxTop = DB.offsetHeight - target.offsetHeight,
maxLeft = DB.offsetWidth - target.offsetWidth;
if(top < 0) top = 0;
if(top > maxTop) top = maxTop;
if(left < 0) left = 0;
if(left > maxLeft) left = maxLeft;
}
target.style.left = left + "px";
target.style.top = top + "px"; if (typeof callback == "function") {
callback(left, top);
}
}; bindHandler(DB, "mouseup", stopDrag);
bindHandler(DB, "mousemove", beginDrag);
}); function bindHandler(elem, type, handler) {
if (window.addEventListener) {
//false表示在冒泡阶段调用事件处理程序
elem.addEventListener(type, handler, false);
} else if (window.attachEvent) {
// IE浏览器
elem.attachEvent("on" + type, handler);
}
} function removeHandler(elem, type, handler) {
// 标准浏览器
if (window.removeEventListener) {
elem.removeEventListener(type, handler, false);
} else if (window.detachEvent) {
// IE浏览器
elem.detachEvent("on" + type, handler);
}
} })(bar, target, inWindow, callback);
};
上边的方法主要接受两个参数：第一个是点击的对象（即点击那里可以实现拖拽，例如弹出层的标题栏），第二个是拖拽的对象（例如一个弹出层）。也就是startDrag(触发拖拽对象，被拖拽对象)。详细使用方法猛戳上边链接查看。