原生拖拽,拖放事件(drag and drop)

拖拽,拖放事件可以通過拖拽實現數據傳遞,達到良好的交互效果,如:從操作系統拖拽文件實現文件選擇,拖拽實現元素布局的修改.

drag and drop事件流程

一個完整的drag and drop流程通常包含以下幾個步驟:

1. 設置可拖拽目標.設置屬性draggable="true"實現元素的可拖拽.
2. 監聽dragstart設置拖拽數據
3. 為拖拽操作設置反饋圖標(可選)
4. 設置允許的拖放效果,如copy,move,link
5. 設置拖放目標,默認情況下瀏覽器阻止所有的拖放操作,所以需要監聽dragenter或者dragover取消瀏覽器默認行為使元素可拖放.
6. 監聽drop事件執行所需操作

拖拽事件

以下是拖拽產生的一系列事件,拖拽事件產生時不會產生對應的鼠標事件.

• dragstart:拖拽開始時在被拖拽元素上觸發此事件,監聽器需要設置拖拽所需數據,從操作系統拖拽文件到瀏覽器時不觸發此事件.
• dragenter:拖拽鼠標進入元素時在該元素上觸發,用於給拖放元素設置視覺反饋,如高亮
• dragover:拖拽時鼠標在目標元素上移動時觸發.監聽器通過阻止瀏覽器默認行為設置元素為可拖放元素.
• dragleave:拖拽時鼠標移出目標元素時在目標元素上觸發.此時監聽器可以取消掉前面設置的視覺效果.
• drag:拖拽期間在被拖拽元素上連續觸發
• drop:鼠標在拖放目標上釋放時,在拖放目標上觸發.此時監聽器需要收集數據並且執行所需操作.如果是從操作系統拖放文件到瀏覽器,需要取消瀏覽器默認行為.
• dragend:鼠標在拖放目標上釋放時,在拖拽元素上觸發.將元素從瀏覽器拖放到操作系統時不會觸發此事件.

DataTransfer對象

拖拽事件周期中會初始化一個DataTransfer對象,用於保存拖拽數據和交互信息.以下是它的屬性和方法.

• dropEffect: 拖拽交互類型,通常決定瀏覽器如何顯示鼠標光標並控制拖放操作.常見的取值有copy,move,link和none
• effectAllowed: 指定允許的交互類型,可以取值:copy,move,link,copyLink,copyMove,limkMove, all, none默認為uninitialized(允許所有操作)
• files: 包含File對象的FileList對象.從操作系統向瀏覽器拖放文件時有用.
• types: 保存DataTransfer對象中設置的所有數據類型.
• setData(format, data): 以鍵值對設置數據,format通常為數據格式,如text,text/html
• getData(format): 獲取設置的對應格式數據,format與setData()中一致
• clearData(format): 清除指定格式的數據
• setDragImage(imgElement, x, y): 設置自定義圖標

dataTransfer對象在傳遞給監聽器的事件對象中可以訪問,如下:

draggableElement.addEventListener('dragstart', function (event) { event.dataTransfer.setData('text', 'Hello World'); }, false); 

推薦的拖拽元素和數據類型

詳細參考MDN recommended drag type

文本

在頁面中選擇文本並拖拽,無需處理dragstart設置數據,瀏覽器自動設置選取的文本.相當於event.dataTransfer.setData("text/plain", "this is text to drag").只需要在拖放目標上讀取對應格式的數據即可.

鏈接

實際案例

前面介紹了最基本的理論知識,下面進行實際操作

元素拖拽

目標: 拖拽元素到達目的區域,改變在DOM中的位置,同時設置反饋視覺效果在線demo

<div id="demo1"> <ul class="panel-list"> <li class="panel-item"></li> <li class="panel-item"></li> <li class="panel-item"></li> <li class="panel-item"></li> <li class="panel-item"></li> </ul> <h2>拖拽下面的方塊到上面任意容器中</h2> <!-- 設置draggable使元素成為可拖拽元素 --> <span class="movable" id="demo1-src" draggable="true"></span> <style> #demo1 { margin: 20px; } #demo1 .panel-list { overflow: hidden; list-style: none; margin: 0; padding: 0; } #demo1 .panel-item { float: left; margin-right: 30px; width: 100px; height: 100px; background: #ddd; border: 1px solid #ddd; } #demo1-src { display: inline-block; width: 50px; height: 50px; background: purple; } #demo1 .over { border: 1px dashed #000; -webkit-transform: scale(0.8, 0.8); } </style> <script> (function () { var dnd = { // 初始化 init: function () { var me = this; me.src = document.querySelector('#demo1-src'); me.panelList = document.querySelector('.panel-list'); // 為拖拽源監聽dragstart,設置關聯數據 me.src.addEventListener('dragstart', me.onDragStart, false); // 拖拽鼠標移入元素,在拖放目標上設置視覺反饋 me.panelList.addEventListener('dragenter', me.onDragEnter, false); // 取消元素dragover默認行為,使其可拖放 me.panelList.addEventListener('dragover', me.onDragOver, false); // 拖拽移出元素,清除視覺反饋 me.panelList.addEventListener('dragleave', me.onDragLeave, false); // 鼠標釋放,在拖放目標上接收數據並處理 me.panelList.addEventListener('drop', me.onDrop, false); }, onDragStart: function (e) { e.dataTransfer.setData('text/plain', 'demo1-src'); }, onDragEnter: function (e) { if (e.target.classList.contains('panel-item')) { e.target.classList.add('over'); } }, onDragLeave: function (e) { if (e.target.classList.contains('panel-item')) { e.target.classList.remove('over'); } }, onDragOver: function (e) { e.preventDefault(); }, onDrop: function (e) { var id = e.dataTransfer.getData('text/plain'); var src = document.getElementById(id); var target = e.target; if (target.classList.contains('panel-item')) { target.appendChild(src); target.classList.remove('over'); } } }; dnd.init(); }()); </script> </div> 

從操作系統拖拽圖片到指定區域進行預覽

從操作系統拖拽文件到瀏覽器中.不會觸發dragstart,dragend,只需取消拖放區域的默認行為,設置反饋,並在拖放發生時取消瀏覽器默認行為,通過e.dataTransfer.files獲取文件信息進行操作.在線demo

<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 -->