前 言
---------
拖拽(Drag/Drop)是個非常普遍的功能。在使用電腦的過程中，拖放一個東西是相當常見。很多javascript都類似實現了相關的功能，例如，jQueryUI的draganddrop組件。在HTML5中，拖拽(draganddrop)成為了標准操作，任何元素都可以進行拖放。下面就了解一下簡單的H5拖放。
先上代碼：
（代碼運行時，可以打開控制台）
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <style type="text/css"> #div1,#div2{ width:600px; height:400px; padding:10px; border:1px solid red; float: left; } </style> <script type="text/javascript"> function allowDrop(ev){ //重寫dragover事件的默認行為，將無效放置目標設置為可放置目標 ev.preventDefault(); console.log("正在目標中移動"); } function drag(ev){ //重寫dragover事件的默認行為，將無效放置目標設置為可放置目標 ev.dataTransfer.setData("Text",ev.target.id); // 拖放的數據類型和值 console.log("拖動開始了"); } function drop(ev){ ev.preventDefault(); //保存在dataTransfer對象中的數據只能在drop事件處理程序中讀取 //元素拖到放置目標中會觸發drop事件。 var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); console.log("拖放成功了"); } function enter(){ console.log("進入目標區了"); } function leave(){ console.log("離開目標區了"); } function end(){ console.log("拖放停止了"); } // function drags(){ // console.log("正在拖放移動中"); // } </script> </head> <body> <p>請把圖片拖放到矩形中：</p> <!-- ondrop :當放置被拖數據時，會發生 drop 事件。 ondragover :事件規定在何處放置被拖動的數據。 ondragenter :表示當元素被拖動到放置目標上就會觸發，類似於mouseover事件 --> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="enter(event)" ondragleave="leave(event)"> <p>div1</p> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <p>div2</p> </div> <!-- draggable="true" :設置元素可被拖放 ondragstart :拖動開始時，調用一個函數 "drag(event)" --> <img id="drag1" src="img/add.png" draggable="true" ondragstart="drag(event)" ondragend="end(event)" /> <!--ondrag="drags(event)"--> </body> </html>
一、設置元素為可拖放
首先，為了使元素可拖動，把 draggable 屬性設置為 true
上面例子代碼中：
<img draggable="true" />
二、 ondragstart 和 setData()
當元素被拖動時，事件觸發，所調用的函數。
上面例子代碼中，ondragstart 屬性調用了一個函數，drag(event)，規定被拖動的數據。
dataTransfer.setData() 方法設置被拖數據的數據類型和值：
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
其中數據類型是 "Text"，值是可拖動元素的 id ("drag1")。
解釋一下：dataTransfer對象
事件對象的一個屬性，用於從被拖動元素向放置目標傳遞字符串格式的數據。有二個方法，
(1) getData() 表示可以取得由setData()保存的值。
(2) setData() 它的第一個參數也是getData()方法的唯一個參數，是一個字符串表示保證的數據類型，"text"或者"URL"。
如果將數據保存為URL瀏覽器會把它當成網頁中的鏈接，當把它放置到地址欄上會打開該URL。
三、在何處放置 - ondragover
ondragover 事件規定在何處放置被拖動的數據。
由於默認的是，無法將數據元素放置到其他元素中。如果需要設置允許放置，就必須阻止對元素的默認處理方式。
這就要通過調用 ondragover 事件的 event.preventDefault() 方法：
調用 preventDefault()就是用來避免瀏覽器對數據的默認處理
event.preventDefault()
四、放置 - ondrop
當放置被拖數據時，會發生 drop 事件。
上面例子代碼中，ondrop 屬性調用了一個函數，drop(event)：
function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
五、拖放(Drag 和 Drop)各屬性
[作用在被拖拽的元素上的事件]：
ondragstart：表示按下鼠標鍵並開始移動鼠標的時，進行觸發。（對象是被拖拽元素）
ondrag：dragstart事件觸發完隨即觸發drag事件，在元素拖動期間不停的觸發該事件，與mousemove事件類似。（對象是被拖拽元素）
ondragend：當拖動停止時，無論是放在有效還是無效目標上會觸發dragend事件。（對象是被拖拽元素）
[作用在目標元素上的事件]：
ondragenter：表示當元素被拖動到放置目標上就會觸發，類似於mouseover事件。（對象是目標元素）
ondragover：隨即觸發dragover事件，且被拖動元素一直在放置目標的范圍內移動就一直持續觸發。（對象是目標元素）
ondragleave：dragover事件不再發生，他會觸發dragleave事件，類似於mouseout事件，如果元素放到了放置目標中，則會觸發drap事件而不是dragleave事件。（對象是目標元素）
ondrop：被拖拽的元素在目標元素上鼠標放開時觸發事件。（對象是目標元素）
下面看一下效果：
