下面我们用 (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有一部份我省略掉了,仔细看一下是可以看出来的。