拖拽效果在網站中是很常見的一種效果，其實現原理很簡單，不過其中也隱藏了不少關鍵知識點，比如說焦點丟失問題等。接下來看看具體代碼是怎麽實現的。

css樣式（註意：元素要定位，不然沒有效果）

1 .box {
2     position: absolute;
3     width: 100px;
4     height: 100px;
5     background-color: #f00;
6     cursor: move;
7 }

html結構（這裏為什麽使用行內樣式，因為後面操作需要獲取元素的css樣式，原生的js只能獲取行內樣式css。）

<div class="box" id
 
="box" style="left: 0px;top: 0px;">

</div>

核心代碼

 1 var box = document.getElementById("box");
 2 
 3 box.onmousedown = down;  //綁定鼠標按下事件
 4 
 5 function down(e) {
 6 
 7     e = e || window.event;  //處理兼容
 8 
 9     this["startX"] = e.clientX;  //在綁定元素身上添加自定義屬性 記錄鼠標的起始位置與元素的坐標值
10     this["startY"] = e.clientY;
 
11     this["startL"] = parseFloat(this.style.left);
12     this["startT"] = parseFloat(this.style.top);
13 
14     //IE和火狐提供了setCapture方法防止鼠標移動過快，焦點丟失問題,但是谷歌不兼容
15     if(this.setCapture) {
16         this.setCapture();
17     } else {
18         var that = this;  //如果不支持，就把事件綁定到document上，不論鼠標移動多快，都不會丟失焦點
 
19         document.onmousemove = function(e) {
20             move.call(that, e);  //這裏用call改變了this指向，因為如果不使用call，此時執行move方法的this是window，移動元素無效果。
21         };
22         document.onmouseup = function() {
23             up.call(that, e);
24         };
25     }
26 }
27 
28 function move(e) {
29     e = e || window.event;
30 
31     var curL = (e.clientX - this["startX"]) + this["startL"];
32     var curT = (e.clientY - this["startY"]) + this["startT"];
33 
34     var minL = 0,
35         minT = 0,
36         maxL = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth,
37         maxT = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;
38     //邊界值
39     curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
40     curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
41 
42     this.style.left = curL + "px";
43     this.style.top = curT + "px";
44 }
45 
46 function up(e) {
47     e = e || window.event;
48 
49     if(this.releaseCapture) { //鼠標擡起，解綁事件
50         this.releaseCapture();
51     } else {
52         document.onmousemove = null;
53         document.onmouseup = null;
54     }
55 }

其中關鍵點就是事件中的e對象，這個對象提供了很多有用的信息，我們常用到clientX,clientY,pageX,pageY等。

js實現拖拽