前言
拖放（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>
在整個拖放過程中，我們以上說的是表面現象，事件過程內部還會發生什么事情呢？請看下面👇的DataTransfer對象。
DataTransfer對象
與拖放操作所觸發的事件同時派發的對象是DragEvent，它派生於MouseEvent，具有Event與MouseEvent對象的所有功能，並增加了dataTransfer屬性。該屬性用於保存拖放的數據和交互信息，返回DataTransfer對象。
// DataTransfer dataTransfer = DragEvent.dataTransfer
DataTransfer對象定義的屬性和方法有很多種，我們看下列入標准的幾個。
| 屬性 | 說明 |
|---|---|
| types | 只讀屬性。它返回一個我們在dragstart事件中設置的拖動數據格式的數組。 格式順序與拖動操作中包含的數據順序相同。IE10+、Edge、safari3.1、Firefox3.5+ 和Chrome4以上支持該屬性 |
| files | 返回拖動操作中的文件列表。包含一個在數據傳輸上所有可用的本地文件列表。如果拖動操作不涉及拖動文件，此屬性是一個空列表。 |
| dropEffect | 獲取當前選定的拖放操作的類型或將操作設置為新類型。它應該始終設置成effectAllowed的可能值之一【none、move、copy、link】。dragover事件處理程序中針對放置目標來設置dropEffect。 |
| effectAllowed | 指定拖放操作所允許的效果。必須是其中之一【 none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized】默認為uninitialized 表示允許所有的效果。ondragstart處理程序中設置effectAllowed屬性 |
| 方法 | 說明 |
|---|---|
| void setData(format, data) | 將拖動操作的拖動數據設置為指定的數據和類型。format可以是MIME類型 |
| String getData(format) | 返回指定格式的數據，format與setData()中一致 |
| void clearData([format]) | 刪除給定類型的拖動操作的數據。如果給定類型的數據不存在，此方法不執行任何操作。如果不給定參數，則刪除所有類型的數據。 |
| void setDragImage(img, xOffset, yOffset) | 指定一副圖像，當拖動發生時，顯示在光標下方。大多數情況下不用設置，因為被拖動的節點被創建成默認圖片。x,y參數分別指示圖像的水平、垂直偏移量 |
//IE10及之前版本，不支持擴展的MIME類型名
//Firefox 5版本之前，不能正確的將url和text映射為text/uri-list 和text/plain
var dataTransfer = event.dataTransfer;
//讀取文本，
var text = dataTransfer.getData("Text");
//讀取URL,
var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");
瀏覽器支持程度
說了這么多，如果瀏覽器不支持，也是白扯。
Method of easily dragging and dropping elements on a page, requiring minimal JavaScript.
要求最少的js，實現拖拽頁面元素的簡單方法
drag之瀏覽器支持程度--caniuse

note
dataTransfer.items只有Chrome支持dropzone屬性，目前沒有瀏覽器支持- Firefox支持
.setDragImage任何類型的DOM元素。Chrome必須有HTMLImageElement或者任何DOM元素，該DOM元素附加到DOM 和瀏覽器的.setDragImage視口(viewport)內。
1.部分支持是指不支持dataTransfer.files或者.types對象
2.部分支持是指不支持.setDragImage
3.部分支持是指dataTransfer.setData / getData的有限支持格式
以下，我在實際中遇到的情況，各瀏覽器對標准的實現還是有差異的。
getData()在chrome 62.0瀏覽器中，只能在drop事件中生效。- 如果使用
setDragImage方法，指定的圖像不存在，則拖動過程：- safari 11.0.1 瀏覽器，只會觸發
dragstart和dragend事件。 - chrome、opera 和 Firefox會正常觸發其他事件。
- safari 11.0.1 瀏覽器，只會觸發
- 每一次拖放操作，Firefox都會執行一次新開一個頁面的動作，並且自動搜索
dataTransfer.getData()得到的內容。
解決方法，在drop事件中，添加：e.stopPropagation();// 不再派發事件。解決Firefox瀏覽器，打開新窗口的問題。 - opera 49版本中，鏈接默認不可以拖動，必須把
draggable屬性設置為true，才可以拖動。 - 關於
dropEffect和effectAllowed。effectAllowed允許拖放操作的效果，最多不會超過那么幾種。dropEffect設置拖放操作的具體效果，只能是四種可能之一。- 如果
effectAllowed設置為none，則不允許拖放元素。但是各個瀏覽器能觸發的事件不一樣。（注意：safari可以拖放元素，而且會觸發所有事件） - 如果
dropEffect設置為none，則不允許被拖放到目的地元素中。 - 如果設置了
effectAllowed的值，那么如果要設置dropEffect的值，其值必須和effectAllowed的值一致，否則拖動效果無效，而且不允許將被拖放元素放到目的地元素中。(注：safari11.0.1有效果，而且也能拖動到目的地元素中，但是這不符合標准)。
示例
drag-drop-dataTransfer各屬性方法示例
drag-drop事件觸發
總結
原生HTML5拖拽API，drag && drop 在實際工作中，還是有很多情況下會遇到的。
以上，我只介紹了部分常用API。API不復雜，多看會兒，實踐就知道了。各個瀏覽器，可能會在表現上，稍有不同，但我相信大家還是會向着標准發展的。