纯js实现DIV拖拽

写代码的时候遇到需要对绝对布局的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(触发拖拽对象，被拖拽对象)。详细使用方法猛戳上边链接查看。