方法/步驟
-
1
DataTransfer對象：退拽傳遞的對象，一般使用Event.dataTransfer。
-
2
draggable屬性，標簽元素設置值為true。drangable=true。
-
3
ondragstart事件:元素被拖拽的時候觸發的事件，作用在被拖拽元素上。
-
ondragenter事件:進入目標元素觸發事件，作用在目標元素上。
-
ondragover事件:拖拽元素在目標元素上移動的時候觸發的事件，作用在目標元素上。
-
ondrop事件:被拖拽的元素在目標元素上同時鼠標放開觸發的事件，作用在目標元素上。
-
ondragend事件:拖拽完成后觸發事件，作用在被拖拽元素上。
-
Event.preventDefault()方法:阻止默認方法執行。ondragover中一定要執行preventDefault(),否則ondrop事件不會被 觸發。
-
Event.effectAllowed屬性:拖拽的效果。
-
設置元素為可拖放，draggable屬性設置為true。
-
拖動元素 使用ondragstart事件。setData()設置獲取元素。
dataTransfer.setData()方法設置被拖數據類型和值:
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
drag(event)聲明方法，規定被拖動的數據，類型是"text",值是可拖動元素id獲取。
-
拖拽放入目標 ondragover，ondragover事件規定在何處放置被拖拽的數據。
一定要定義event.preventDefault(),來阻止默認動作。
-
進行放置 ondrop 當放置被拖數據時，會發生drop事件。
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementByIdx_x(data));
}