1、 開啟拖放
將將要拖放的對象元素的draggable屬性設置為true，任何元素均可實現拖放，但img與a元算（必須制定href）默認允許拖放。
2、與拖放相關的事件
| 事件 | 產生事件的元素 | 描述 |
| dragstart | 被拖放的元素 | 開始拖放操作 |
| drag | 被拖放的元素 | 拖放過程中 |
| dragenter | 拖放過程中鼠標經過的元素 | 被拖放的元素開始進入本元素的范圍內 |
| dragover | 拖放過程中鼠標經過的元素 | 被拖放的元素正在本元素的范圍內移動 |
| dragleave | 拖放過程中鼠標經過的元素 | 被拖放的元素離開本元素的范圍 |
| drop | 拖放的目標元素 | 有其他元素被拖放到本元素中 |
| dragend | 拖放的對象元素 | 拖放操作結束 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function init(){ var source = document.getElementById('dragme'); var dest = document.getElementById("text"); //拖動開始 source.addEventListener("dragstart",function(ev){ //向dataTransfer對象添加數據 var dt = ev.dataTransfer; dt.effectAllowed = "all"; //拖動元素為dt.setData("text/plain",this.id); dt.setData("text/plain","您好"); },false); //拖放結束 dest.addEventListener("dragend",function(ev){ //不執行默認處理(拒絕被拖放) ev.preventDefault(); },false); //drop：被拖放 dest.addEventListener("drop",function(ev){ //從DataTransfer對象那里取得數據 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>
針對拖放的目標元素，必須在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>