HTML5 拖放

1．被拖元素設定為可被拖放

Darggable = “true”的時候，意為可拖拽的

<div class="drag" id="drag1" draggable="true" ondragstart="drag(event)">drag</div>

2.規定當前被拖元素被拖動時會發生的事件

Ondragstart=function  drag(event){}  //執行這個函式
function drag(event) {
    event.dataTransfer.setData("text",event.target.id);   //當一個元素被拖起來的時候 ；兩個引數 1.自定義 2目標元素的id
}

event.dataTrangsfer.setData(“text”,event.target,id);把目標元素的id存放到“text”裡面

3.設定另一個元素可接受被拖動資料

Event.preventDefault();
//允許被放的事件
function allowDrop(event){
    event.preventDefault(); //消除預設（元素不可以接受另一個元素）屬性

清除系統對元素的預設（不允許接受另一個元素的）屬性
阻止預設：程式原來設定的屬性，我們不希望他們這麼做，所以我們就需要阻止預設事件

4.當鬆開滑鼠時，被拖拽元素會發生的drop事件


//可接受事件
function drop(event) {
event.preventDefault(); //消除預設（瀏覽器對被拖元素以連線的方式開啟）屬性
var data = event.dataTransfer.getData("text"); //得到被拖元素的id
event.target.appendChild(document.getElementById(data)); //接受元素
}

呼叫event.pereventDefault()來避免瀏覽器對資料的預設梳理（drop事件的預設是以連結的形式開啟的）

5.實現來回拖動就是把放置目標（被拖動的元素）的元素屬性設定為可接受元素

在放置目標元素內加上ondrop屬性和ondragover屬性即可
ondrop="drop(event)" ondragover="allowDrop(event)