html中的拖拽功能,HTML5中的drag拖拽功能介绍

拖放(Drag 和 drop)是 HTML5 标准的组成部分，本文主要介绍与拖拽操作相关的对象及事件信息。

要接受元素的放下，目标元素必须监听至少3个事件：

首先是dragenter事件，用来决定是否接受“拖动的元素”被放下，如果接受放下，那么该事件就被取消，进入下一个事件

然后开始dragover事件，用来确定给用户什么样的反馈，即位于该元素之上时呈现什么样的效果，如果该事件被取消，反馈一般是一个鼠标指针， 也可以使用dropEffect属性定义，如果事件没有被取消，那么就是默认的行为，默认的行为一般就是什么也不做。

最后是drop事件，也就是实际将执行的放下动作，这个事件也需要被取消，这样dropEffect属性的设置就可以被使用。

一个简单的示例

在html5中要实现拖放操作，相对于以前通过鼠标操作实现，要简单得多，数据安全性也更有保障。只需要以下几步即可。

给被拖拽元素添加draggable属性，如果是文件拖放。

为目标元素添加一个dropzone属性，这一步也不是必须的，可以省略。

在拖拽元素的dragstart中初始化相关的数据信息，主要是DataTransfer对象。

在目标元素的dragover事件中，取消其默认操作。

在目标元素的drop事件中，处理接受到的数据。

在被拖拽元素的dragend事件中，做善后工作。若没有则可以省略。

大致代码如下：

source