HTML5原生拖拽/拖放(drag & drop)詳解
阿新 • • 發佈：2019-01-18
前言
拖放（drap && drop）在我們平時的工作中，經常遇到。它表示：抓取物件以後拖放到另一個位置。目前，它是HTML5標準的一部分。我從幾個方面學習並實踐這個功能。
拖放的流程對應的事件
我們先看下拖放的流程：
選中 ---> 拖動 ---> 釋放
然後，我們一步步看下這個過程中，會發生的事情。
選中
在HTML5標準中，為了使元素可拖動，把draggable屬性設定為true。
文字、圖片和連結是預設可以拖放的，它們的draggable屬性自動被設定成了true。
圖片和連結按住滑鼠左鍵選中，就可以拖放。
文字只有在被選中的情況下才能拖放。如果顯示設定文字的draggable屬性為true，按住滑鼠左鍵也可以直接拖放。
draggable屬性：設定元素是否可拖動。
語法：<element draggable="true | false | auto" >
- true: 可以拖動
- false: 禁止拖動
- auto: 跟隨瀏覽器定義是否可以拖動
拖動
每一個可拖動的元素，在拖動過程中，都會經歷三個過程，拖動開始-->拖動過程中--> 拖動結束。
| 針對物件 | 事件名稱 | 說明 |
|---|---|---|
| 被拖動的元素 | dragstart | 在元素開始被拖動時候觸發 |
| drag | 在元素被拖動時反覆觸發 | |
| dragend | 在拖動操作完成時觸發 | |
| 目的地物件 | dragenter | 當被拖動元素進入目的地元素所佔據的螢幕空間時觸發 |
| dragover | 當被拖動元素在目的地元素內時觸發 | |
| dragleave | 當被拖動元素沒有放下就離開目的地元素時觸發 |
dragenter和dragover事件的預設行為是拒絕接受任何被拖放的元素。因此，我們必須阻止瀏覽器這種預設行為。e.preventDefault();
釋放
到達目的地之後，釋放元素事件
| 針對物件 | 事件名稱 | 說明 |
|---|---|---|
| 目的地物件 | drop | 當被拖動元素在目的地元素裡放下時觸發，一般需要取消瀏覽器的預設行為。 |
選中拖動釋放例子
<!DOCTYPE HTML> <html> <head> <title>拖放示例-文字</title> </head> <style> .src { display: flex; } .dropabled { flex: 1; } .txt { color: green; } .img { width: 100px; height: 100px; border: 1px solid gray; } .target { width: 200px; height: 200px; line-height: 200px; text-align: center; border: 1px solid gray; color: red; } </style> <body> <div class="src"> <div class="dragabled"> <div class="txt" id="txt"> 所有的文字都可拖拽。 <p draggable="true">此段文字設定了屬性draggable="true"</p> </div> <div class="url" id="url"> <a href="http://weiqinl.com" target="_blank">我是url:http://weiqinl.com</a> </div> <img class="img" id="tupian1" src="img1.png" alt="圖片1" /> <img class="img" id="tupian2" src="img2.png" alt="圖片2" /> </div> <div id='target' class="dropabled target">Drop Here</div> </div> <script> var dragSrc = document.getElementById('txt') var target = document.getElementById('target') dragSrc.ondragstart = handle_start dragSrc.ondrag = handle_drag dragSrc.ondragend = handle_end function handle_start(e) { console.log('dragstart-在元素開始被拖動時候觸發') } function handle_drag() { console.log('drag-在元素被拖動時候反覆觸發') } function handle_end() { console.log('dragend-在拖動操作完成時觸發') } target.ondragenter = handle_enter target.ondragover = handle_over target.ondragleave = handle_leave target.ondrop = handle_drop function handle_enter(e) { console.log('handle_enter-當元素進入目的地時觸發') // 阻止瀏覽器預設行為 e.preventDefault() } function handle_over(e) { console.log('handle_over-當元素在目的地時觸發') // 阻止瀏覽器預設行為 e.preventDefault() } function handle_leave(e) { console.log('handle_leave-當元素離開目的地時觸發') // 阻止瀏覽器預設行為 // e.preventDefault() } function handle_drop(e) { console.log('handle_drop-當元素在目的地放下時觸發') var t = Date.now() target.innerHTML = '' target.append(t + '-拖放觸發的事件。') e.preventDefault() } </script> </body> </html>
在整個拖放過程中，我們以上說的是表面現象，事件過程內部還會發生什麼事情呢？請看下面