HTML5中如何实现拖放功能-创新互联

这篇文章主要介绍了HTML5中如何实现拖放功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联建站长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为罗城企业提供专业的网站设计制作、成都网站建设，罗城网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

一、什么是拖放

拖放就是通过鼠标放在一个物体上，按住鼠标不放就可以把一个物体托动到另一个位置。其实我们平时一直都有接触，如图

HTML5中如何实现拖放功能

那么在网页上其实也可以实现同样效果的拖放功能，如图

HTML5中如何实现拖放功能

那么，就让我们来看看如何实现的吧

二、拖放事件

在IE4的时候，Js就可以实现拖放功能了，当时只支持拖放图像和一些文本。后来随着IE版本的更新，拖放事件也在慢慢完善，HTML5就以IE的拖放功能制定了该规范，Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。

默认情况下，网页中的图像、链接和文本是可以拖动的，而其余的元素若想要被拖动，必须将draggable 属性设置为true，这是HTML5规定的新属性，用于设置元素是否能被拖动。因此，图像、链接、文本的draggable 属性默认为true，其余元素的draggable 属性默认为false

在实现拖放功能时有这样两个概念，分别是被拖动元素和目标元素，它们都有各自支持的事件，那么我们来了解一下

（1）被拖动元素的事件

被拖动元素所支持的事件如下表所示

事件	含义
dragstart	准备拖动被拖动元素时触发
drag	拖动的过程中触发（频繁触发）
dragend	拖动结束时触发

我们来用一个例子测试一下这三个事件




    
    
    Document

我们来看看测试效果

HTML5中如何实现拖放功能

（2）目标元素的事件

在实现拖放功能的过程中，目标元素上的事件有如下三个

事件	含义
dragenter	被拖放元素进入目标元素时触发
dragover	被拖放元素在目标元素内时触发（频繁触发）
dragleave	被拖动元素离开目标元素时触发
drop	当被拖动元素被放到了目标元素中时触发

这里我要详细讲解一下这三个事件的触发规则：

dragenter事件与mouseover 事件类似，那怎样才算被拖放元素进入目标元素呢？经过测试发现，当被拖放元素的一半以上面积在目标元素内才算进入了目标元素
dragover事件比较特殊，当拖放元素进入目标元素以后就会一直触发，就跟你设置了一个无限循环的定时器一样，即使你不移动元素也会触发，除非拖放事件结束或者被拖放元素离开目标元素
dragleave事件 的其触发条件正好与dragenter 事件相反，它是当被拖放元素离开目标元素时触发，经过测试，离开目标元素的条件是：被拖放元素一半以上的面积离开目标元素
drop事件 可以叫做放置目标事件，它是当被拖放元素放置到了目标元素中时触发。虽然任何元素都支持该事件，但是所有元素默认都是不允许被放置的，所以在不做任何处理的情况下，该事件是不会触发的

同样的，我们来用具体的例子，先来体会一下前三个事件




    
    
    Document

Document

方法	含义
setData	设置字符串，并设置数据类型
getData	获取对应数据类型的字符串

方法

含义

setData

设置字符串，并设置数据类型

getData

获取对应数据类型的字符串

Document

属性	含义
dropEffect	被拖放元素的放置行为
effectAllowed	目标元素支持的放置行为

属性

含义

dropEffect

被拖放元素的放置行为

effectAllowed

目标元素支持的放置行为

值	含义
none	默认值。不能把拖动的元素放在这里
move	应该把拖动的元素移动到该目标元素
copy	应该把拖动元素复制到该目标元素
link	表示目标元素会打开被拖放进来的元素对应的链接

值

含义

none

默认值。不能把拖动的元素放在这里

move

应该把拖动的元素移动到该目标元素

copy

应该把拖动元素复制到该目标元素

link

表示目标元素会打开被拖放进来的元素对应的链接

值	含义
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 目标元素

值

含义

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 目标元素

Document 我是一段测试文字

大橙子网站建设，新征程启航

HTML5中如何实现拖放功能-创新互联

其他资讯