今天看到一篇寫的很好的文章，摘抄如下：

思路

父盒子相對定位，子元素，也就是被拖拽的元素絕對定位

當鼠標在子元素中按下時，綁定鼠標移動事件，根據鼠標位置改變元素位置

• 設置鼠標當前位置（offsetX,offsetY,這時和父的相對位置）為元素的中心位置
• 移動時改變位置css中的left為offsetX...的位置

當鼠標離開時，解綁鼠標移動事件

實現過程（一）

css 部分

.decision-box{position: relative; width: 1500px; height: 600px; border: 1px solid #000; border-radius: 6px; /*margin-left: -40px;*/ } .item{ position: absolute; width: 50px; height: 30px; background: green; border-radius: 6px; text-align: center; line-height: 30px; cursor: pointer; left: 50px }

html 部分

<div class="decision-box decision_box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>

js 部分

//鼠標按下，要在移動元素上按下$(document).on('mousedown','.decision_box .item',function(e){ var ele = $(e.target); $(document).on('mousemove','.decision_box',function(e){ //移動鼠標時改變元素位置 var x = e.offsetX, y = e.offsetY; ele.css({ left:x - 25 + 'px', top:y - 15 + 'px' }); e.stopPropagation(); }); e.stopPropagation(); }); //鼠標放開 $(document).on('mouseup',function(){ //解除鼠標移動事件 $(document).off('mousemove'); });

這時，發生了錯誤，元素一閃一閃的，位置不是一直跟著鼠標，在mousemove觸發函數里打印一下位置，發現位置不一直是鼠標位置。原來是應為鼠標位置offsetX的原因。

關于鼠標位置

• clientX 相對于可是窗口的距離
• offsetX 相對于e.target元素的位置
• pageX 相對于文檔的左邊緣
• screenX 相對于屏幕的位置

原來offsetX是相對于e.target元素的位置。加入被拖拽元素寬高100px,當我點擊100px,100px時，元素的中心位置變為100,100；此時offsetX又變為了50；這時offsetX又變回100；（以上數字只是數字，因為有移動）。如上，就形成了一閃一閃，之后鼠標會超過元素范圍，這時，元素位置就在鼠標相對于本身和鼠標相對于父盒子之間切換。

那么怎么解決這個問題呢？我的思路是：

• 使用其它鼠標位置，當點擊元素時獲取位置作為初始位置
• 當移動時獲取位置并求出相對位移，這個相對于位移也就是元素要移動的距離。

實現過程（二）

js 部分

//鼠標按下，要在移動元素上按下$(document).on('mousedown','.decision_box .item',function(e){ console.log(parseInt($(e.target).css('left'))) var ele = $(e.target); var initX = e.clientX, initY = e.clientY, itemX = parseInt(ele.css('left')); itemY = parseInt(ele.css('top')); $(document).on('mousemove','.decision_box',function(e){ //移動鼠標時改變元素位置 var curX = e.clientX, curY = e.clientY; ele.css({ left:itemX + (curX - initX) + 'px', top:itemY + (curY - initY) + 'px' }); e.stopPropagation(); }); e.stopPropagation(); }); //鼠標放開 $(document).on('mouseup',function(){ //解除鼠標移動事件 $(document).off('mousemove'); });

成功，可以拖動了，這時又遇上了一個問題，當拖動元素時，有其它文本別選中時，拖拽又出現了bug，這時就要用到下面面這兩個屬性

onselectstart = "return false"; onselect = "return false";

• onselectstart事件不被input和textarea標簽支持，而onselect事件只被input和textarea支持。
• Firefox/Opera不支持onselectstart事件Firefox中可以使用CSS "-moz-user-select:none"屬性來禁止文本選定
• webkit瀏覽器可以使用“-khtml-user-select”，當然也可以使用onselectstart事件來阻止用戶選定元素內文本，如下

<div onselectstart="return false">accc</div>

這個屬性意思就是不讓文本被選中。要做的就是當點擊元素時，上這個屬性，當放開鼠標時去掉這個屬性（改成return true）；

最后代碼

//鼠標按下，要在移動元素上按下$(document).on('mousedown','.decision_box .item',function(e){ $('body').attr('onselectstart','return false'); console.log(parseInt($(e.target).css('left'))) var ele = $(e.target); var initX = e.clientX, initY = e.clientY, itemX = parseInt(ele.css('left')); itemY = parseInt(ele.css('top')); $(document).on('mousemove','.decision_box',function(e){ //移動鼠標時改變元素位置 var curX = e.clientX, curY = e.clientY; ele.css({ left:itemX + (curX - initX) + 'px', top:itemY + (curY - initY) + 'px' }); e.stopPropagation(); }); e.stopPropagation(); }); //鼠標放開 $(document).on('mouseup',function(){ $('body').attr('onselectstart','return true'); //解除鼠標移動事件 $(document).off('mousemove'); });

這時，選中文本后再進行拖拽還有問題,(也可不解決)我暫時不知道；還有碰撞檢測什么的也沒加。待續......

?

https://www.jianshu.com/p/bd6e4f6122cf

轉載于:https://www.cnblogs.com/sweeeper/p/11525703.html

總結

以上是生活随笔為你收集整理的div拖拽的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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