页面拖放

下面我们用 (Drag/Drop) 来实现一下页面拖放，拖拽(Drag/Drop)是个非常普遍的功能，在HTML5中，拖拽(drag and drop)成为了标准操作，任何元素都支持。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

HTML5 简单的拖放实列

看上去有点复杂，但慢慢的去分析拖放的部分就能理解了。

为了使元素可拖动，把 draggable 属性设置为 true ：

我们用ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
在这个例子中，数据类型是"Text"，值是可拖动元素的 id("#back,#jack,#doog")

ondragover 事件规定在何处放置被拖动的数据。这要通过调用
ondragover 事件的 event.preventDefault()方法：

当放置被拖数据时，会发生 drop 事件，ondrop 属性调用了一个函数，drop(event)：

被拖放元素

目标元素

实现的效果：任意把哪张图片拖到盒子里都可以，拖到哪个盒子都可以，看你个人喜欢怎么摆放，下面有参考图，建议大家试一下，还可以设置很多效果。

还可以把所有的图片集中到一个盒子里面，只显示第一张，其他的都隐藏起来了，左右两边的盒子都可以集中，只要用鼠标拖过去就行了。

解释一下上面的代码:

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

通过dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

被拖数据是被拖元素的 id ("#back,#jack,#doog")

把被拖元素追加到放置元素（目标元素）中

这样看起来大家应该很容易理解了吧，上面的JS有一部份我省略掉了，仔细看一下是可以看出来的。