重點解釋：
首先，為了使元素（如本圖片）可拖動，把 draggable 屬性設置為 true ：
dataTransfer.setData() 方法設置被拖數據的數據類型和值：
ondragover 事件規定在何處放置被拖動的數據。
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
這要通過調用 ondragover 事件的 event.preventDefault() 方法：
當放置被拖數據時，會發生 drop 事件。
- 調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）
- 通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。
- 被拖數據是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目標元素）中
結果----》
拖動前
拖動后
再拖動回去
........
在兩個 <div> 元素之間拖放圖像--- 代碼清單：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> #div1,#div2{ float:left; width:150px; height:50px; margin: 10px; padding: 10px; border: 1px dashed #bbbbbb;} </style> <script> function allowDrag(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrag(event)"> <img src="1.jpg" width="120px" height="50px" draggable="true" ondragstart="drag(event)" id="drag1" /> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrag(event)"> </div> </body> </html>