说说如何使用 HTML5 实现拖放功能（使用原生 API）

最新推荐文章于 2022-05-19 15:35:29 发布

Deniro Lee

最新推荐文章于 2022-05-19 15:35:29 发布

阅读量854

点赞数 1

分类专栏： HTML JavaScript 文章标签： html5 javascript

本文链接：https://blog.csdn.net/deniro_li/article/details/75530625

版权

JavaScript 同时被 2 个专栏收录

91 篇文章 1 订阅

订阅专栏

HTML

7 篇文章 2 订阅

订阅专栏

拖放指的是在框架间、窗口间或者应用间拖放网页元素。

1 拖放事件

拖放事件分为两种：被拖动的元素上触发的事件以及放置目标上触发的事件。拖动某元素时，将依次触发以下事件：

dragstart
drag
dragend

按下鼠标键并开始移动鼠标时，在被拖动的元素上触发 dragstart 事件。光标变为不能放的符号（因为不能拖放到自己身上）。

在元素被拖动期间会持续触发 drag 事件。这与 mousemove 事件相似，鼠标移动的过程中，mousemove 事件也会持续触发。当拖动停止时（无论放置有效还是无效），会触发 dragend 事件。

默认情况下，不会在拖动期间改变被拖动元素的外观，但可以自定义修改。但大多数浏览器会为被拖动的元素创建一个半透明的副本，它会始终跟着光标移动。

当元素被拖动到一个有效的放置目标时，将依次触发以下事件：

dragenter
dragover
dragleave 或 drop

被拖动的元素如果还在放置目标的范围内移动时，会持续触发 dragover 事件。如果元素被拖出了放置目标，将触发 dragleave 事件。如果元素被放置到了目标中，就会触发 drop 事件。这三个事件的目标都是作为放置目标的元素。

2 自定义放置目标

拖动元素到某个无效的放置目标时，会出现不可放置的符号（圆圈中的一条反斜线），表示不可放置。有些元素默认是不可放置的。可以重写这些元素的 dragenter 和 dragover 事件的默认行为，这样就可以把任何元素变为有效的放置目标。假设在页面上有一个 id 为 “droptarget” 的 <div> 元素，我们这样让它变为有效的放置目标：

var droptarget = document.getElementById("droptarget");

EventUtil.addHandler(droptarget, "dragover", function(event){
    EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "dragenter", function(event){
    EventUtil.preventDefault(event);
});

在 Firefox 3.5+ 中，放置事件的默认行为是打开被放到放置目标的 URL，即如果放置的是图像，则会打开图像文件；如果是文本，就会报错。所以在 Firefox 中还要取消 drop 事件的默认行为：

EventUtil.addHandler(droptarget, "drop", function(event){
    EventUtil.preventDefault(event);
});

3 dataTransfer 对象

dataTransfer 对象让被拖动的元素向放置目标传递数据（字符串格式），因为它是事件对象的属性，所以只能在拖放的事件处理程序中使用 dataTransfer 对象。

它有两个方法，getData() 和 setData()，即获取和设置数据。，setData() 有一个参数，即要保存的数据类型（字符串格式），而 getData() 的第一个参数也是要保存的数据类型：

//设置和接收文本数据
event.dataTransfer.setData("text","some text");
var text = event.dataTransfer.getData("text");

//设置和接收 URL
event.dataTransfer.setData("URL","http://xxx");
var url = event.dataTransfer.getData("URL");

HTML5 可以指定各种的 MIME 类型，它也支持 “text” 和 “URL”，这两种类型会被分别映射为 “text/plain” 和 “text/uri-list”。

注意：保存在 dataTransfer 对象中的数据只能在 drop 的事件处理程序中读取，在 drop 的事件处理程序之外的地方，dataTransfer 对象就会被销毁！

拖动文本框中的文本时，浏览器会调用 setData() 方法，把拖动的文本以 “text” 格式保存在 dataTransfer 对象中。在拖放链接或者图像时，也会调用 setData() 并保存它们的 URL 地址。所以当这些元素被拖放到放置目标时，就可以使用 getData() 读取数据。也可以在 dragstart 事件中使用 setData() 自定义需要传递的数据。

数据的 URL 格式与文本格式不同。URL 格式的数据如果放置到另一个浏览器窗口中，就会打开这个 URL！

旧版的 Firefox不能正确处理 “url” 和 “text”，所在跨浏览器的方案是这样的：

var dataTransfer = event.dataTransfer;

//读取 URL
var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");

//读取文本
var text = dataTransfer.getData("Text");

这里把短字符的数据类型放在前面，因为 IE10 及之前版本还不支持扩展的 MIME 类型名！

4 dropEffect 和 effectAllowed

dropEffect 属性说明被拖动的元素能够执行哪一种放置行为：

属性值	说明
none	不能放置，除文本框之外的所有元素都是这个默认值。
move	被拖动的元素可以移动到放置目标。
copy	被拖动的元素可以拷贝到放置目标。
link	放置目标会打开被拖动的元素的 URL 地址，所以被拖动的元素必须是一个链接。

上面的每一个值都会导致光标显示不同的符号，但实际上没有实现这些功能！所以我们要自己来实现它们！还有，必须在 ondragenter 事件中对放置目标应用 dropEffect 属性。

effectAllowed 属性表示允许拖动元素的哪一种 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 属性。