JS實現拖拽效果注意點
阿新 • • 發佈：2021-01-04
技術標籤：javascripthtml5
最近工作中要去實現組織架構的拖拽行為， 然後被一個點給坑了乘著週末有時間記錄一下避免再次採坑
簡單效果圖示：
步驟：
其實就是監聽幾個事件，主要是坑在最好一步放入的時候需要阻止拖拽結束的預設事件
- 拖拽開始 dragstart
- 拖拽中 drag
- 拖拽結束 dragover
- 拖拽離開 dragleave
- 拖拽進入 drageenter
- 監聽放入 drop 需要阻止預設事件並且阻止拖拽結束的預設事件
簡單程式碼：
<body> <div class="box"> <div class="content" id="info" draggable="true"> 這裡是內容 </div> </div> <div class="box"></div> <div class="box"></div> <script> // 宣告拖拽元素變數 let dragDom; // 監聽拖拽開始 document.addEventListener('dragstart', function (e) { if (e.target.className === 'content') { // 拖拽開始可以傳入資訊,鍵值對形式 e.dataTransfer.setData('test', e.target.id); dragDom = e.target; } }, false) // 監聽拖拽進入變化顏色 document.addEventListener('dragenter', function (e) { let tar = e.target; if (tar.className === 'box') { tar.style.backgroundColor = 'skyBlue' } }, false) // 監聽離開恢復顏色 document.addEventListener('dragleave', function (e) { let tar = e.target; if (tar.className === 'box') { tar.style.backgroundColor = ''; } }) // 結束放入需要阻止dragover裡面的預設行為,不然drop無法監聽到 document.addEventListener('dragover', function (e) { e.preventDefault(); }) // 放入區塊 document.addEventListener('drop', function (e) { e.preventDefault(); let tar = e.target; // 輸出拖拽自定義的資訊 console.log(e.dataTransfer.getData('test')) console.log(e.dataTransfer.types) // 清除自定義拖拽資訊 e.dataTransfer.clearData(); console.log(e.dataTransfer.getData('test')) if (tar.className = 'box') { tar.appendChild(dragDom); // appendChild 有剪下功能 tar.style.backgroundColor = ''; } }, false) </script>
希望對大家有所幫助哈