先看看效果
完整测试代码：
<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中新增的特性，
有三个值true,false,auto.true可以拖，false不可以，auto由用户浏览器是否支持而定。
<img id="img1" src="images/screen1.jpg" draggable="true" ondragstart="handleDragStart(event)" width="150" height="100">2.ondragstart和dataTransfer.setData()决定了当我们拖动元素的时候会干些什么事：function handleDragStart(e) {e.dataTransfer.effectAllowed = 'move';e.dataTransfer.setData("Text", e.target.id);}
3.拖动元素之后，要把元素放到哪里？所以要设定目标元素，例子中是要把拖动的元素放入box这个div中，所以给div添加了ondragover事件,该事件触发了allowDrop(e)这个函数。
function 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)获取的被拖元素
最后详细介绍下：dataTransfer对象
以下内容参考了：
运用dataTransfer对象，不仅仅能传输数据，，还能通过dataTransfer对象确定被拖拽元素以及目标的元素能够接收什么操作。要实现这样的功能就用到了dropEffect属性和effectAllowed属性。
none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
link：放置目标会打开拖动的元素(但拖动的元素必须是个链接，有URL地址)。
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事件触发的函数中设置
奋斗令我们的生活充满生机，责任让我们的生命充满意义！
