加這個div, up 事件就必須綁定給document ,否則會出現問題！

---

版本2 ：

?

---

版本3 ：

是正按下ctrl + a 再拖動的時候，會出現， 抖影子

這個解決辦法，也是有兼容問題，我就不寫了，直接截圖過來！

/** 提取一個專門用來設置拖拽的函數* 參數：開啟拖拽的元素*/function drag(obj){//當鼠標在被拖拽元素上按下時，開始拖拽 onmousedownobj.onmousedown = function(event){//設置box1捕獲所有鼠標按下的事件/** setCapture()* - 只有IE支持，但是在火狐中調用時不會報錯，* 而如果使用chrome調用，會報錯*//*if(box1.setCapture){box1.setCapture();}*/obj.setCapture && obj.setCapture();event = event || window.event;//div的偏移量 鼠標.clentX - 元素.offsetLeft//div的偏移量 鼠標.clentY - 元素.offsetTopvar ol = event.clientX - obj.offsetLeft;var ot = event.clientY - obj.offsetTop;//為document綁定一個onmousemove事件document.onmousemove = function(event){event = event || window.event;//當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove//獲取鼠標的坐標var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置obj.style.left = left+"px";obj.style.top = top+"px";};//為document綁定一個鼠標松開事件document.onmouseup = function(){//當鼠標松開時，被拖拽元素固定在當前位置 onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;//當鼠標松開時，取消對事件的捕獲obj.releaseCapture && obj.releaseCapture();};/** 當我們拖拽一個網頁中的內容時，瀏覽器會默認去搜索引擎中搜索內容，* 此時會導致拖拽功能的異常，這個是瀏覽器提供的默認行為，* 如果不希望發生這個行為，則可以通過return false來取消默認行為* * 但是這招對IE8不起作用*/return false;};}

---

最后一個版本，好像就是加入，scrollTop scrollLeft!

?

至此拖拽就基本搞定了，謝謝大家閱讀，祝大家學習愉快！開心生活！

?

總結

以上是生活随笔為你收集整理的开心截图，拖拽大作战的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。