HTML5拖放的两个入门案例

发送到手机
使用"扫一扫"即可发送至手机

在HTML5出现之前,页面元素的拖放功能需要通过监听mousedown, mouseover, mouseup等事件,改变元素的相对位置来实现。现在HTML5 DnD API的出现,使得html具有原生的拖放功能,使用也非常简单。下面通过两个小案例来上手一下HTML5的拖放新特性。

实例1

首先我们建立一个基本的html:

图片1.png

第一个div为我们需要将元素拖入的区域,第二个div中是一个稻壳互联的logo图片,是我们的拖拽对象,给它们一些样式后,当前在浏览器中显示为默认的上下摆放,如图:

图片2.png

接下来我们要实现的就是把logo拖放到图片里面去。

第一步:

设置draggale为true设置图片为可拖拽的:

图片3.png

事实上img、a等元素默认就是可拖拽的,为了统一,还是都加上draggable属性。

第二步:

当元素被拖动时,使用ondragstart属性调用一个drag(event)函数,函数中使用dataTransfer.setData()方法规定被拖动元素的数据,由于我们要设置的元素是图片的id,所以需要再给图片加上一个id属性:

图片4.png

然后完成drag方法:

图片5.png

第三步:

把元素被拖入的区域设置为可以放置元素,因为元素默认无法放置到其他元素中。添加ondragover属性调用函数,函数中使用event.preventDefault()方法:

图片6.png

allowDrop方法:

图片7.png

第四步:

处理放置时间drop,添加ondrop属性调用函数:

图片8.png

drop方法:

图片9.png

其中,dataTransfer.getData()方法获取刚刚设置的被拖动元素的数据,此处是id,然后将该元素添加为拖入区域的子元素。

给目标区域设置居中对齐和顶部内边距边距后,测试一下,将稻壳互联的logo拖拽至水稻图片中,得到完成后的效果:

图片10.png

实例2

从实例1延伸一下,我们把样式设置成上下两个区域:

图片11.png

然后我们要实现logo在两个区域间拖放

其实非常简单,logo目前所在的区域也进行同样的设置,即加上ondragover和ondrop属性调用之前写好的相应的方法即可完成:

图片12.png

测试一下,将logo往上拖拽:

图片13.png

再往下拖拽,我们已经实现了想要的效果,logo可以在两个div之间来回拖放:

图片11.png

总结

HTML5中拖放特性的核心功能点:

元素属性:draggable ,  ondragstart ,  ondragover ,  ondrop

js方法:dataTransfer.setData() ,  dataTransfer.getData() ,  preventDefault()

HTML5拖放的两个入门案例

HTML5拖放的两个入门案例

分享: