純js實現DIV拖拽

寫代碼的時候遇到須要對絕對佈局的div進行拖拽的功能，起初爲了省事直接在網上扒拉了一番，看到大神張鑫旭的一篇文章《JavaScript實現最簡單的拖拽效果》，便直接拿來使用（膜拜大神）。但發現這段代碼使用前必須設置top和left樣式屬性，不然拖動時div會有跳動，並且不支持多個div的拖動。因而對代碼大概修改了一番，貼在這裏，以備後用，但願大神勿怪。

 1 /**
 2  * 純js實現多div拖拽
 3  * @param bar, 拖拽觸柄
 4  * @param target, 可拖動窗口
 5  * @param inWindow, 爲true時只能在屏幕範圍內拖拽
 6  * @param callback, 拖拽時執行的回調函數。包含兩個參數，target的left和top
 7  * @returns {*}
 8  * @private
 9  */
10 var startDrag = function(bar, target, /* optional */inWindow, /* optional */callback) {
11     (function(bar, target, callback) {
12         var D = document,
13             DB = document.body,
14             params = {
15                 left: 0,
16                 top: 0,
17                 currentX: 0,
18                 currentY: 0
19             };
20         if(typeof bar == "string") {
21             bar = D.getElementById(bar);
22         }
23         if(typeof target == "string") {
24             target = D.getElementById(target);
25         }
26         bar.style.cursor="move";
27         bindHandler(bar, "mousedown", function(e) {
28             e.preventDefault();
29             params.left = target.offsetLeft;
30             params.top = target.offsetTop;
31             if(!e){
32                 e = window.event;
33                 bar.onselectstart = function(){
34                     return false;
35                 }
36             }
37             params.currentX = e.clientX;
38             params.currentY = e.clientY;
39             
40             var stopDrag = function() {
41                 removeHandler(DB, "mousemove", beginDrag);
42                 removeHandler(DB, "mouseup", stopDrag);
43             }, beginDrag = function(e) {
44                 var evt = e ? e: window.event,
45                     nowX = evt.clientX, nowY = evt.clientY,
46                     disX = nowX - params.currentX, disY = nowY - params.currentY,
47                     left = parseInt(params.left) + disX,
48                     top = parseInt(params.top) + disY;
49                 if(inWindow) {
50                     var maxTop = DB.offsetHeight - target.offsetHeight,
51                         maxLeft = DB.offsetWidth - target.offsetWidth;
52                     if(top < 0) top = 0;
53                     if(top > maxTop) top = maxTop;
54                     if(left < 0) left = 0;
55                     if(left > maxLeft) left = maxLeft;
56                 }
57                 target.style.left = left + "px";
58                 target.style.top = top + "px";
59 
60                 if (typeof callback == "function") {
61                     callback(left, top);
62                 }
63             };
64             
65             bindHandler(DB, "mouseup", stopDrag);
66             bindHandler(DB, "mousemove", beginDrag);
67         });
68         
69         function bindHandler(elem, type, handler) {
70             if (window.addEventListener) {
71                 //false表示在冒泡階段調用事件處理程序
72                 elem.addEventListener(type, handler, false);
73             } else if (window.attachEvent) {
74                 // IE瀏覽器
75                 elem.attachEvent("on" + type, handler);
76             }
77         }
78 
79         function removeHandler(elem, type, handler) {
80             // 標準瀏覽器
81             if (window.removeEventListener) {
82                 elem.removeEventListener(type, handler, false);
83             } else if (window.detachEvent) {
84                 // IE瀏覽器
85                 elem.detachEvent("on" + type, handler);
86             }
87         }
88         
89     })(bar, target, inWindow, callback);
90 };

View Code

上邊的方法主要接受兩個參數：第一個是點擊的對象（即點擊那裏能夠實現拖拽，例如彈出層的標題欄），第二個是拖拽的對象（例如一個彈出層）。也就是startDrag(觸發拖拽對象，被拖拽對象)。詳細使用方法猛戳上邊連接查看。