每日分享！～ 使用js原生方式對拖拉元素（鼠標的事件）
阿新 • • 發佈：2019-04-26
綁定 test ice head idt 思路分析 原生 bsp efault
一個元素放置頁面上。如何進行拖拉，實現想放哪裏就放哪裏的效果呢？
效果如下：
如果讓你寫這個效果，你會如何寫呢？
--- 思路分析：我首先想到的是，對這個元素先綁定一個事件。（什麽事件？ 那當然是鼠標按下時的事件啦？ ） 那麽綁定這個事件具體做啥子呢？ 在綁定這個事件之前。我們需要先了解如下幾個事情--
1. 元素如何才能在頁面上移動？ （是不是要脫離文檔流呢？ OK / 這時我們給設置一個position：absolute / 讓其絕對定位。
2. 獲取元素當前距離頁面兩邊的位置
3. 獲取鼠標距離頁面兩邊的位置
4.求得鼠標距離元素邊框的距離
5.在鼠標移動事件中。設置元素的left , top 值 。 便可以使元素動起來啦 。
6. 在鼠標擡起的時候，清掉鼠標移動和鼠標擡起事件。
--- 下面是具體的代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ position: absolute; width: 100px; height: 100px; background-color: red; top:100px ; left:100px; } </style> </head> <body> <button id="btn">test</button> <div id="dv"></div> <script> // 鼠標點擊元素開啟監聽事件 dv.addEventListener(‘mousedown‘,(e)=>{ // 計算鼠標箭頭和元素的左邊緣和上邊緣的距離 var disX = e.pageX - dv.offsetLeft var disY = e.pageY - dv.offsetTop // console.log(dv.offsetLeft) // 當點擊時，會一直觸發監聽鼠標的移動事件（監聽document // document.addEventListener(‘mousemove‘, (e) =>{ // // console.log(e) // // 設置元素的移動距離 // dv.style.left = e.pageX - disX + ‘px‘ // dv.style.top = e.pageY - disY + ‘px‘ // }) // document.addEventListener(‘mouseup‘,(e) =>{ // // 移除兩個事件 // document.removeEventListener(‘mosedown‘,(e) =>{ // // console.log(e) // // 設置元素的移動距離 // dv.style.left = e.pageX - disX + ‘px‘ // dv.style.top = e.pageY - disY + ‘px‘ // }) // document.removeEventListener(‘mosueup‘,() =>{}) // }) // // 阻止默認事件 // console.log(e.preventDefault()) document.onmousemove = function(e){ dv.style.left = e.pageX - disX + ‘px‘ dv.style.top = e.pageY - disY + ‘px‘ } document.onmouseup = function(){ document.onmousemove = document.onmouseup = null } e.preventDefault() // 總結： 使用addEventLister() 在移除事件的實際不方便！！ 還是采用普通的事件監聽函數～～ }) </script> </body> </html>
好了～～～今天的分享就先到這裏啦！ 還有一點其他的知識留著明天分享吧！～～～每天分享一點～ 2019-04-25 23:15:39
值得註意的是：獲取距離的幾個方法： 如：target.offsetTop / e.pageY / 等
每日分享！～ 使用js原生方式對拖拉元素（鼠標的事件）