HTML5之前，要實現網頁元素的拖放操作，需要依靠mousedown、mousemove、mouseup等API，通過大量的JS代碼來實現；HTML5中引入了直接支持拖放操作的API，大大簡化了網頁元素的拖放操作編程難度，並且這些API除了支持浏覽器內部元素的拖放外，同時支持浏覽器和其它應用程序之間的數據互相拖動。
本文通過一個簡單示例，演示HTML5中拖放API的使用方法。
場景：
如下圖所示，我們要實現：
- 通過拖放將照片從左側“相冊”區域拖拽到右側“垃圾箱”區域；
- 拖拽過程中，“溫馨提示”部分要及時提醒，當前正在進行拖放操作；
實現方法：
如上界面的HTML代碼比較簡單，如下：
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5實現拖拽操作</title>
<meta charset="utf-8"/>
<style>
.album
{
border: 3px dashed #ccc;
float: left;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 220px;
}
</style>
</head>
<body">
<div id="info">
<h2>溫馨提示：可將照片直接拖到垃圾箱中</h2>
</div>
<div id="album" class="album">
<h2>相冊</h2>
<img draggable="true" id="img1" src="img/bg_01.png" />
<img draggable="true" id="img2" src="img/bg_02.png" />
<img draggable="true" id="img3" src="img/bg_03.png" />
</div>
<div id="trash" class="album">
<h2>垃圾箱</h2>
</div>
<br/>
</body>
</html>