先看看效果
完整测试代码：
<p>Html5 拖拽</p>
<div id="box" ondrop="handleDrop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="img1" src="images/screen1.jpg" draggable="true" ondragstart="handleDragStart(event)" width="150" height="100">
<img id="img2" src="images/screen2.jpg" draggable="true" ondragstart="handleDragStart(event)" width="150" height="100">
<img id="Img3" src="images/screen3.jpg" draggable="true" ondragstart="handleDragStart(event)" width="150" height="100">#box {
width: 450px;
height: 100px;
padding: 10px;
border: 1px dotted red;
}<script>
function allowDrop(e) {
e.preventDefault();
}
function handleDragStart(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.id);
}
function handleDrop(e) {
e.preventDefault();
var src = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(src));
}
</script>
Drag的英译是 拖、拽 ；Drop的意思是 放下
Drag和Drop 是html5中新增的特性，任何元素都能够拖放。大部分主流浏览器目前也够支持html5的拖放功能。
完成拖放的过程主要是由draggable属性、ondragstart 事件、dataTransfer.setData() 方法、Ondragover 事件 、ondrop事件和dataTransfer.getData() 方法 来完成，接下来详细的说明这些属性和事件是怎么完成拖放。
1. 我们想要拖动那个元素，首先要把这个元素设置成可拖拽，将该元素的draggable 属性设置为 true。
有三个值true,false,auto. true可以拖，false不可以，auto由用户浏览器是否支持而定。
<img id="img1" src="images/screen1.jpg" draggable="true" ondragstart="handleDragStart(event)" width="150" height="100">例如例子中当通过鼠标拖动图标的时候就会触发ondragstart事件，这个事件触发handleDragStart这个函数。
function handleDragStart(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.id);
}关于dataTansfer对象的属性和方法的详细介绍请看本文结尾！
3. 拖动元素之后，要把元素放到哪里？所以要设定目标元素，例子中是要把拖动的元素放入box这个div中，所以给div添加了ondragover事件,该事件触发了allowDrop(e)这个函数。
function allowDrop(e) {
e.preventDefault();
}注： ondragover 事件规定在何处 可以放置被拖动的元素。（默认地，无法将数据 / 元素放置到其他元素中。如果需要设置允许放置， 则必须阻止对元素的默认事件，即： 若想触发ondrop事件，ondragover 中必须阻止默认事件 。 ） 所以 allowDrop(e) 函数里通过 e.preventDefault()阻止了默认行为。
4. 我们知道了要把元素放到box这个div里，而当我们放下元素时发生 ondrop事件，所以要在box这个div里设置ondrop事件，该事件触发handleDrop(event)这个函数。
function handleDrop(e) {
e.preventDefault();
var src = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(src));
}通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置的数据，因为之前setData() 设置的是img的id值，所以这里返回的就是相应img的id值。
接着通过document.getElementById(src)获取的被拖元素
接着通过appendChild函数把被拖元素（img）追加到目标元素（div）中。
注： 在Firefox 3.5+中，如果是把图像拖放到放置目标上，页面就会转向图像文件；而如果是把文本拖放到放置目标上，则会导致无效URL错误，因此，为了让Firefox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL。
最后详细介绍下：dataTransfer对象
以下内容参考了：http://jingyan.baidu.com/article/6dad5075cf6e62a123e36e11.html
dataTransfer对象是事件对象的一个属性，用于从被拖拽元素向目标元素传递字符串格式的数据。因为它是事件对象的属性，所以只有在获取到事件对象的前体下才能访问dataTransfer对象。
dataTransfer对象有两个主要的方法：getData()方法和setData()方法。setData()方法的第一个参数，也是getData()方法唯一的一个参数，是用来保存数据类型的字符串，取值是”text”或”URL”。
将数据保存在文本“text”和保存为URL是有区别的。如果将数据保存为文本格式，那么数据不会得到任何特殊处理。如果保存为URL格式，浏览器会将其当成网页中的链接。如果你将这个URL放置到另一个浏览器窗口中，就可以打开该URL。
dataTransfer对象的dropEffect属性和effectAllowed属性
运用dataTransfer对象，不仅仅能传输数据，还能通过dataTransfer对象确定被拖拽元素以及目标的元素能够接收什么操作。要实现这样的功能就用到了dropEffect属性和effectAllowed属性。
通过dropEffect属性可以知道被拖动的元素能够执行哪种行为。有四个值
none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
move：应该把拖动的元素移动到放置目标。
copy：应该把拖动的元素复制到放置目标。
link：放置目标会打开拖动的元素(但拖动的元素必须是个链接，有URL地址)。
把元素拖动到目标元素上的时候，以上每一个值都会导致光标显示为不同的符号。光有dropEffect属性是不咋管用的。只有结合effectAllowed属性一起使用才能发挥功效。effectAllowed属性表示允许拖动元素的哪种(dropEffect)行为。effectAllowed属性也有很多值，其值如下：
uninitialized：没有给被拖动元素设置任何放置行为。
none：被拖动的元素不能有任何行为。
copy：只允许值为”copy”的dropEffect。
link：只允许值为”link”的dropEffect。
move：只允许值为”move”的dropEffect。
copyLink：允许值为”copy”和”link”的dropEffect。
copyMove：允许值为”copy”和”move”的dropEffect。
linkMove：允许值为”link”和”move”的dropEffect。
all：允许任意dropEffect。
注 ： 要设置effectAllowed属性必须在ondragstart事件触发的函数中设置