目錄
drag簡介
> HMTL5提供的支持原生拖拽的實現兼容性如何？
桌面端的支持比較好，移動端的支持還是比較差
拖拽流程
1.設置可拖拽目標.設置屬性draggable="true"實現元素的可拖拽(文本、圖片和鏈接是默認可以拖放的，它們的draggable屬性自動被設置成了true。) 2.監聽dragstart，通過DataTransfer設置拖拽數據 3.為拖拽操作設置反饋圖標(可選) 4.設置允許的拖放效果，如copy,move,link 5.設置拖放目標，默認情況下瀏覽器阻止所有的拖放操作，所以需要監聽dragenter或者dragover取消瀏覽器默認行為使元素可拖放. 6.監聽drop事件執行所需操作drag事件
dragstart：在元素開始被拖動時候觸發 drag：在元素被拖動時反復觸發（可以在此處節流） dragend：在拖動操作完成時觸發 dragenter：當被拖動元素進入目的地元素所占據的屏幕空間時觸發 dragover：當被拖動元素在目的地元素內時觸發 dragleave 當被拖動元素沒有放下就離開目的地元素時觸發DataTransfer對象
> 在進行拖放操作時，DataTransfer 對象用來保存，通過拖放動作，拖動到瀏覽器的數據。它可以保存一項或多項數據、一種或者多種數據類型。e.dataTransfer.files
包含一個在數據傳輸上所有可用的本地文件列表。如果拖動操作不涉及拖動文件，此屬性是一個空列表。
e.dataTransfer.types
保存一個被存儲數據的類型列表作為第一項，順序與被添加數據的順序一致。
從操作系統拖拽圖片到指定區域進行預覽
> 從操作系統拖拽文件到瀏覽器中.不會觸發dragstart,dragend,只需取消拖放區域的默認行為,設置反饋,並在拖放發生時取消瀏覽器默認行為,通過e.dataTransfer.files獲取文件信息進行操作<div id="demo2">
<h3>從文件夾中拖拽圖片到下面的區域進行預覽</h3>
<ul class="preview"></ul>
<style>
#demo2 {
margin: 20px;
}
#demo2 .preview {
height: 300px;
background: #ddd;
}
#demo2 li {
float: left;
margin-left: 40px;
}
#demo2 img {
max-height: 150px;
width: auto;
}
</style>
<script>
(function (w) {
var doc = w.document;
var dnd = {
init: function () {
var me = this;
var preview = doc.querySelector('#demo2 .preview');
preview.addEventListener('dragover', function (e) {
e.preventDefault();
}, false);
preview.addEventListener('drop', function (e) {
// 操作系統拖放文件到瀏覽器需要取消默認行為
e.preventDefault();
[].forEach.call(e.dataTransfer.files, function (file) {
if (file && file.type.match('image.*')) {
var reader = new FileReader();
reader.onload = function (e) {
var img = doc.createElement('img');
img.src = e.target.result;
var li = doc.createElement('li');
li.appendChild(img);
preview.appendChild(li);
};
reader.readAsDataURL(file);
}
});
}, false);
}
};
dnd.init();
}(window));
</script>
</div> <!-- demo2 -->
drag實例
```
This div is draggable
<h2 id=08>小結</h2>
通過本章的學習，我們更深入的了解到如何使用drag進行拖放，並且通過dataTransfer獲取拖放的相應數據。由於該對象的瀏覽器兼容還存在問題，所以在使用時務必查詢的can i use，確保符合項目需求。否則可以選擇 mouse事件進行拖拽處理