HTML拖放

1. 被拖動元素的屬性設置爲可拖放

   draggable = ‘true’

2. 規定元素被開始拖動時，會發生什麼

   Ondragstart = drad(event);//執行這個函數

Function Drag（ev）{

//設置被拖動元素的數據類型和值（值是被拖動元素的id）

//把被拖目標元素的id存到text裏面。

Ev.dataTransfer.setData(“Text”,ev.target.id);

}

1. 設置元素爲可接收 被拖動的數據

   Ondragover = allowDrag（event）

   Function allowDrag(ev){

   //阻止默認（不允許把數據拖放到其他元素中）對數據的處理方式

   Ev.preventDefault();

   }

2. 當放置（鬆開鼠標）被拖動數據時，會發生的drop事件

   ondrop = drop(event);

   function drop(ev){

//調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以鏈接形式打開）

Ev.preventDefault();

獲得被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據

Var data = ev.dataTansfer.get(“Text”);

Ev.target.appenChild(document.getelementbyid(data));

/*ev.target.removeChild(document.getElementById(data))*/

}

阻止默認：阻止系統本應該發生的事件

 

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

在放置目標的元素內加上ondrop屬性和ondragover屬性即可

ondrop="drop(event)" ondragover="allowDrop(event)"