<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通過拖放實現添加、刪除</title>
<style type="text/css">
div>div{
display:inline-block;
padding:10px;
background-color:#aaa;
margin:3px;
}
</style>
</head>
<body>
<div style="width:600px;border:1px solid black;">
<h2>可將你喜歡的項目拖進收藏夾</h2>
<div draggable="true" ondragstart="dsHandler(event);">項目1</div>
<div draggable="true" ondragstart="dsHandler(event);">項目2</div>
<div draggable="true" ondragstart="dsHandler(event);">項目3</div>
<div draggable="true" ondragstart="dsHandler(event);">項目4</div>
<div draggable="true" ondragstart="dsHandler(event);">項目5</div>
</div>
<div id="dest" style="width:400px;height:400px;border:1px solid black;float:left;">
<h2 ondragleave="return false">收藏夾</h2>
</div>
<div id="gb" draggable="false" style="float:left;width:100px;height:100px;border:1px solid black;">垃圾桶</div>
<script type="text/javascript">
var dest = document.getElementById("dest");
//開始拖動事件的事件監聽器
var dsHandler = function(evt){
//將被拖動元素的innerHTML屬性值設置成被拖動的數據
evt.dataTransfer.setData("text/plain","<item>" + evt.target.innerHTML);
}
dest.ondrop = function(evt){
var text = evt.dataTransfer.getData("text/plain");
//如果text以<item>開頭
if(text.indexOf("<item>") == 0){
//創建一個新的div元素
var newEle = document.createElement("div");
//以當前時間爲該元素生成一個唯一的ID
newEle.id = new Date().getUTCMilliseconds();
//該元素內容爲“拖”過來的數據
newEle.innerHTML = text.substring(6);
//設置該元素允許拖動
newEle.draggable = "true";
//爲該元素的開始拖動事件指定監聽器
newEle.ondragstart = function(evt){
//將被拖動元素的id屬性值設置成被拖動的數據
evt.dataTransfer.setData("text/plain","<remove>"+newEle.id);
}
dest.appendChild(newEle);
}
}
// 當把被拖動元素“放”到垃圾桶上時激發該方法。
document.getElementById("gb").ondrop = function(evt)
{
var id = evt.dataTransfer.getData("text/plain");
// 如果id以<remove>開頭
if (id.indexOf("<remove>") == 0)
{
// 根據“拖”過來的數據，獲取被拖動的元素
var target = document.getElementById(id.substring(8));
// 刪除被拖動的元素
dest.removeChild(target);
}
}
document.ondragover = function(evt)
{
// 取消事件的默認行爲
return false;
}
document.ondragleave = function(evt){
//取消被拖動的元素離開本元素時觸發該事件
return false;
}
document.ondrop = function(evt)
{
// 取消事件的默認行爲
return false;
}
</script>
</body>
</html>
在HTML 5 中img元素默認是可拖動的；而a元素只要設置了href屬性，它默認也是可拖動的。
對於普通元素而言，如果希望把它變成可拖動的，開發者只要把該元素的draggable屬性設爲true即可。但設置該屬性只表示該元素可拖動，拖動過程中未攜帶數據，因此用戶看不到效果。爲了讓拖動操作攜帶數據，應該爲被拖動元素的ondragstart事件指定監聽器，在該監聽器中讓拖動操作可以攜帶數據。
document對象默認阻止拖動事件，所以被拖動元素到“目的地”時不被接受。爲了讓document可以接受“放”，應該爲document的ondragover事件指定監聽器，在監聽器中取消document對拖動事件默認行爲。
拖放操作的相關事件有：
- ondragstart：被拖放的HTML元素開始拖動時觸發該事件。
- ondrag：被拖放的HTML元素在拖放過程中不斷觸發該事件。
- ondragend：被拖放的HTML元素拖放結束時觸發該事件。
- ondragenter：拖放時鼠標經過的元素在被拖放元素進入本元素的範圍時觸發該事件。
- ondragover：拖放時鼠標經過的元素在被拖放元素進入本元素的範圍拖動時不斷觸發該事件。
- ondragleave：拖放時鼠標經過的元素離開本元素時觸發該事件。
- ondrop：拖放時鼠標經過的元素在其他元素被放到本元素時觸發該事件。
DataTransfer對象
拖放觸發的拖放事件有一個dataTransfer屬性，該屬性值是一個DataTransfer對象，該對象包含如下屬性和方法：
-
dataTransfer.dropEffect：設置或返回拖放目標上允許發生的拖放行爲。如果此設置的拖放行爲不在effectAllowed屬性設置的多種拖放行爲之內，拖放操作將會失敗。該屬性值只允許none、copy、link、move值之一。
-
dataTransfer.effectAllowed：設置或返回被拖動元素允許發生的拖動行爲。該屬性值可設置爲none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized。
-
dataTransfer.items：該屬性返回DataTransferItems對象，該對象代表了拖動數據。
-
dataTransfer.setDragImage(element x,y)：設置拖放操作的自定義圖標。其中element設置自定義圖標，x設置圖標與鼠標在水平方向的距離；y設置圖標與鼠標在垂直方向的距離。
-
dataTransfer.addElement(element)：添加自定義圖標。
-
dataTransfer.types：該屬性返回一個DOMStringList對象，該對象包括了存入dataTransfer中數據的所有類型。
-
dataTransfer.getData(format)：獲取DataTransfer對象中設置format格式的數據。其中format代表數據格式，data代表數據。
-
dataTransfer.clearData([format])：清除DataTransfer對象中format格式的數據，如果省略format格式，則意味着清除DataTransfer對象中的全部數據。