纯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(触发拖拽对象，被拖拽对象)。详细使用方法猛戳上边链接查看。