drag 和drop？ 来看这个详解吧！！
簡介
拖拽（Drag/Drop）是一個很普遍、很常用的操作，即抓取一個對象后，放到想要放的地方。
在H5中，拖拽是一個標準操作，任何元素都可以拖拽！！
但是！！ 想要實現拖拽，需要添加 拖拽屬性。
H5中拖拽屬性：
draggable： auto | true | false
注意：鏈接和圖片默認是可拖動的，則不需要 draggable 屬性。
- Drag（在拖拽目標時觸發事件）
-
dragstart - 元素開始拖動時觸發此事件
-
drag - 元素正在拖動時觸發此事件
-
dragend - 元素拖動結束后觸發此事件
- Drop（在目標區域釋放時觸發事件）
-
dragenter - 當被拖動的元素進入目標區域內時觸發此事件
-
dragover - 當被拖動的元素在目標區域內拖動時觸發此事件
-
dragleave - 當被拖動的元素離開目標區域時觸發此事件
-
drop - 當被拖動的元素在目標區域被放下時觸發此事件
拖拽步驟
- dragstart 事件： 在進行拖放操作時，通過dataTransfer來實現數據的存儲和獲取，每個event事件對象中都會有DataTransfer對象用來保存被拖動的數據。它可以保存一項或多項數據、一種或者多種數據類型。
- drag事件：在拖拽過程中一直執行
- dragend事件：結束
- dragenter 和dragleave 事件：進入或離開目標區域
- dragover事件：默認無法將數據/元素放置到其他元素中。如果需要設置允許放置，就要阻止元素的默認行為。
- drop事件：放下
完整代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {display: flex;justify-content:space-around;}.left {width: 300px;height: 500px;border: 1px solid lightseagreen;margin-right: 10px;/* background-color: green; */}.right {width: 300px;height: 500px;border: 1px solid lightseagreen;text-align: center;padding: 1px;/* background: red; */}.txt {border: 1px solid gray;margin: 1px;padding: 5px;cursor: move;}</style> </head> <body><main class="main"><div class="left" id="left"><div class="txt-show">左邊區域</div><div class="dargable txt" id="txt1" draggable="true">可移動的文字一</div><div class="dargable txt" id="txt2" draggable="true">可移動的文字二</div><div class="dargable txt" id="txt3" draggable="true">可移動的文字三</div><div class="dargable txt" id="txt4" draggable="true">可移動的文字四</div><div class="dargable txt" id="txt5" draggable="true">可移動的文字五</div></div><div class="right" id="right"><div class="txt-show">右邊區域</div></div></main><script>let left = document.getElementById('left')let target = document.getElementById('right')left.addEventListener('dragstart', (event) => {event.dataTransfer.setData('Text', target.id)console.log('drag開始拖動啦1');})target.addEventListener('dragstart', (event) => {const target = event.target; event.dataTransfer.setData('Text', target.id)})left.addEventListener('drag', (event) => {console.log('drag正在拖啦2');})left.addEventListener('dragend', (event) => {console.log('dragend拖動結束啦7');})target.addEventListener('dragenter', (event) => {console.log('dragenter進入區域啦3')})target.addEventListener('dragover', (event) => {event.preventDefault();console.log('dragover在區域內拖動啦4')})left.addEventListener('dragover', (event) => {event.preventDefault();})target.addEventListener('dragleave', (event) => {console.log('dragleave離開拖動區域啦5')})target.addEventListener('drop', (event) => {let drag_id = event.dataTransfer.getData('text')target.appendChild(document.getElementById(drag_id))})left.addEventListener('drop', (event) => {let drag_id = event.dataTransfer.getData('text')left.appendChild(document.getElementById(drag_id))})</script> </body> </html>小記
-
dragstart事件中通過dataTransfer來實現數據的存儲和獲取，每個event事件對象中都會有DataTransfer對象用來保存被拖動的數據。在項目拖動的開始事件(ondragstart)的時候，可以對dataTransfer進行設值操作(setData)。event.dataTransfer.setData() 進行設值，在拖動結束后，可以通過event.dataTransfer.getData()獲取dataTransfer對象里的值。
-
瀏覽器默認無法將數據/元素放置到其他元素中，如果需要設置允許放置，就要阻止元素的默認行為。通過event.preventDefault()阻止。
-
可以通過添加css樣式進行對拖拽效果的改變。例：dragSrc.classList.add(‘ds’) 。使用classList在元素中添加，移除及切換 CSS 類，classList 屬性是只讀的，但可以使用 add() 和 remove() 方法修改它。
-
使用 appendChild() 方法移除元素到另外一個元素。
-
HTML Drag and Drop API
-
DataTransfer()
-
HTML DOM appendChild() 方法
-
HTML DOM addEventListener() 方法
總結
以上是生活随笔為你收集整理的drag 和drop？ 来看这个详解吧！！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 码云仓库使用说明
- 下一篇： android区域截图app,截图 +