元素拖拽分成3個(gè)步驟：按下鼠標(biāo)，移動(dòng)鼠標(biāo)，松開鼠標(biāo)。

拖拽原理：按下拖拽元素后開始監(jiān)聽文檔中鼠標(biāo)移動(dòng)事件，然后再監(jiān)聽鼠標(biāo)松開事件；鼠標(biāo)移動(dòng)時(shí)，元素div要隨著鼠標(biāo)一起移動(dòng)，需要計(jì)算元素div位移的距離（移動(dòng)的距離=鼠標(biāo)離可視窗口的位置 ? 鼠標(biāo)在div中相對(duì)于左上角的位置）。然后松開鼠標(biāo)時(shí)，刪除移動(dòng)事件和松開事件，元素完成拖拽。

一開始先監(jiān)聽鼠標(biāo)按下事件mousedown，事件觸發(fā)執(zhí)行mouseHandler函數(shù)；

div.addEventListener('mousedown',mouseHandler);

進(jìn)入mouseHandler函數(shù)后，進(jìn)行if else if 的判斷，如果是按下事件，就監(jiān)聽鼠標(biāo)移動(dòng)和松開事件，這里要用document文檔來作為監(jiān)聽對(duì)象，如果使用元素div監(jiān)聽時(shí)，如果鼠標(biāo)在移動(dòng)過程超出了div元素，就無法拖拽元素；

進(jìn)入移動(dòng)事件，就把鼠標(biāo)移動(dòng)的距離（鼠標(biāo)離可視窗口的位置 ? 鼠標(biāo)在div中相對(duì)于左上角的位置）賦值給元素的left和top，元素就可以隨著鼠標(biāo)移動(dòng)；

最后進(jìn)入松開鼠標(biāo)事件，刪除了移動(dòng)和送開鼠標(biāo)事件，元素就會(huì)停在鼠標(biāo)松開的位置

關(guān)鍵：元素顯示位置=鼠標(biāo)離可視窗口的位置 ? 鼠標(biāo)相對(duì)于在div元素左上角的位置

js代碼帶注釋

var div=document.querySelector('div'); var offsetX,offsetY;//定義全局變量用于接收鼠標(biāo)坐標(biāo)的變量 div.addEventListener('mousedown',mouseHandler); function mouseHandler(e){ //事件的執(zhí)行函數(shù)自帶參數(shù)e if(e.type==='mousedown'){ //e.type是執(zhí)行事件的類型offsetX=e.offsetX; offsetY=e.offsetY; document.addEventListener('mousemove',mouseHandler) document.addEventListener('mouseup',mouseHandler) //如果有鼠標(biāo)移動(dòng)或松開事件的發(fā)生再次執(zhí)行mouseHandler函數(shù) }else if(e.type==='mousemove'){ div.style.left=e.clientX-offsetX+'px'; //鼠標(biāo)相對(duì)當(dāng)前可視窗口的坐標(biāo) - 相對(duì)元素左上角的坐標(biāo) div.style.top=e.clientY-offsetY+'px'; }else if(e.type==='mouseup'){ document.removeEventListener('mousemove',mouseHandler);document.removeEventListener('mouseup',mouseHandler); //刪除鼠標(biāo)移動(dòng)和鼠標(biāo)松開事件 } }

效果如圖：

注意：div元素要設(shè)置定位才可以進(jìn)行移動(dòng)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。