HTML5拖放API
1、 開啟拖放
將將要拖放的對象元素的draggable屬性設置為true，任何元素均可實現拖放，但img與a元算（必須制定href）默認允許拖放。
2、與拖放相關的事件
| 事件 | 產生事件的元素 | 描述 |
| dragstart | 被拖放的元素 | 開始拖放操作 |
| drag | 被拖放的元素 | 拖放過程中 |
| dragenter | 拖放過程中鼠標經過的元素 | 被拖放的元素開始進入本元素的范圍內 |
| dragover | 拖放過程中鼠標經過的元素 | 被拖放的元素正在本元素的范圍內移動 |
| dragleave | 拖放過程中鼠標經過的元素 | 被拖放的元素離開本元素的范圍 |
| drop | 拖放的目標元素 | 有其他元素被拖放到本元素中 |
| dragend | 拖放的對象元素 | 拖放操作結束 |
針對拖放的目標元素，必須在dragend或dragover事件內調用“事件對象.preventDefault()”方法。因為默認情況下，拖放的目標元素是不允許接受元素的，為了把元素拖放到其中，必須關閉默認處理。
要實現拖放過程，還必須在目標元素的drop事件中關閉默認處理(拒絕被拖放)，否則拖放處理也不能實現。因為頁面實現與其他元素接受拖放的，如果頁面上拒絕拖放，那么頁面上其他元素就不能接受拖放了。
要實現拖放過程，還必須設定整個頁面為不執行默認處理(拒絕被拖放)，否則被拖放處理也不能實現。因為頁面是先于其他元素接受拖放的，如果頁面上拒絕拖放，那么頁面上其他元素不能接受拖放了。
為了讓拖放在所有支持拖放API的瀏覽器中都能正常運行，需要制定"-webkit-user-drag:element"這種Webkit特有的CSS屬性。
3、MIME類型
·text/plain：文本文字 ·text/html：HTML文字 ·text/xml：XML文字 ·text/uri-list：URL列表，每個URL為一行4、js的dataTransfer對象
提供對于預定義的剪貼板格式的訪問,以便在拖拽中使用。
| 屬性 | 描述 | 參數 |
| dropEffect | 設置或返回拖放目標上允許發生的拖放行為和要顯示的光標類型 | copy 復制樣式被顯示 link? 鏈接樣式被顯示 move? 移動樣式被顯示 none? 默認,沒有鼠標樣式被定義 |
| effectAllowed | 設置或返回被拖動元素允許發生的拖動行為與該對象的源元素。 | copy 選項被復制 link? 選項被dataTransfer作為link方式保存 move? 當放置時,對象被移動至目標對象 copylink? 選項是被復制還是被作為link方式保存關鍵在于目標對象 linkmove 選項是被作為link方式保存還是被移動關鍵在于目標對象 all 所有效果都被支持 none 不支持任何效果 uninitialized 默認不能通過這個屬性傳遞任何值 |
| types | 存入數據的種類，字符串的偽數組 | ? |
| clearData() | 清除DataTransfer對象中存放的數據，如果省略參數format，則清楚全部數據 | ? |
| setData(format,data) | 將指定格式的數據賦值給dataTransfer對象 | 參數format定義數據的格式也就是數據的類型，data為待賦值的數據 |
| getData(format,data) | 從dataTransfer對象中獲取指定格式的數據 | format代表數據格式，data為數據。 |
| setDragImage(Element image，long x,long y) | 用img元素來設置拖放圖標(部分瀏覽器中可以用canvas等其他元素來設置) | element設置自定義圖標，x設置圖標與鼠標在水平方向上的距離，y設置圖標與鼠標在垂直方向上的距離。 |
effectAllowed定義了在源對象上的操作,可定義在ondragstart事件中。
dropEffect定義了在目標對象上的操作,可定義在ondrop,ondragenter,ondragover事件中。
effectAllowed可以定義all操作,但是dropEffect可以定義copy操作。
5、設定拖放時的視覺效果
DataTransfer對象的dropEffect屬性表示實際拖放時的視覺效果，一般在ondragover事件中指定，允許設定的值為none、link、move。dropEffect屬性所表示的實際視覺效果必須與effectAllowed屬性值所表示的允許操作相匹配，規則如下所示：
- 如果effectAllowed屬性設定為none，則不允許拖放元素。
- 如果dropEffect屬性設定為none，則不允許拖放元素。
- 如果effectAllowed屬性設定為all或不設定，則dropEffect屬性允許被設定為任何值。
- 如果effectAllowed屬性設定為具體操作，而dropEffect屬性也設定了具體視覺效果，則dropEffect屬性值必須與effectAllowed屬性值相匹配，否則不允許將被拖放元素拖放到目標元素中。
6、自定義拖放圖標
setDragImage(Element image，long x,long y)，第一個參數image是設定拖放圖標的圖標元素，第二個參數x為拖放圖標離鼠標指針的X軸方向的唯一量，第三個參數y為拖放圖標離鼠標指針的y軸方向的位移量。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>function init(){var dragIcon = document.createElement("img");dragIcon.src ='https://www.baidu.com/img/bdlogo.png';var source = document.getElementById('dragme');var dest = document.getElementById("text");source.addEventListener('dragstart',function(ev){var dt = ev.dataTransfer;dt.setDragImage(dragIcon,-10,-10);dt.effectAllowed = "copy";dt.setData("text/plain","您好");},false);dest.addEventListener('dragend',function(ev){ev.preventDefault();},false);dest.addEventListener('dragover',function(){var dt = ev.dataTransfer;dt.dropEffect = "copy";ev.preventDefault();},false);dest.addEventListener('drop',function(ev){var dt = ev.dataTransfer;var text = dt.getData("text/plain");dest.textContent +=text;ev.preventDefault();ev.stopPropagation();},false);}document.ondragover = function(e){e.preventDefault();};document.ondrop = function(e){e.preventDefault();}</script></head><body onload="init();"><div id="dragme" draggable="true" style="width: 200px;border: 1px solid gray;">請拖放</div><div id="text" style="width: 200px;height: 200px;border: 1px solid gray;"></div></body> </html>總結
以上是生活随笔為你收集整理的HTML5拖放API的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2020年后台开发程序员应该学习的8大技
- 下一篇： 2017年html5行业报告,云适配发布