HTML5 原生拖放

Thanatos 发布于2019-08-22 11:03 / 506人阅读

摘要：发展原生拖放的发展大致可分为三个阶段。在的实例基础上，进一步制定了拖放的规范。也根据规范实现了原生拖放功能。被拖动的元素在放置目标范围内移动时，会持续触发该事件。参考资料拖放操作拖拽操作拖拽类型列表高级程序设计第版第章脚本编程原生拖放

发展

原生拖放的发展大致可分为三个阶段：IE4、IE5+、HTML5。

IE4 是最早在网页中引入 JavaScript 拖放功能的，当时只有图像和选中的文本可以拖放，并且只有文本框是有效的放置目标。
IE5 拖放功能进一步得到了扩展，添加了新的事件，几乎网页中的任何元素都可以作为放置目标。
IE5.5+ 又更进一步，让网页中的任何元素都可以拖放。
HTML5 在 IE 的实例基础上，进一步制定了拖放的规范。

Firefox 3.5+、Safari 3+、Chrome、Opera 12+也根据 HTML5 规范实现了原生拖放功能。

拖放事件

在进行拖放操作的不同阶段会触发数种事件。注意，在拖拽的时候只会触发拖拽的相关事件，鼠标事件，例如 mousemove，是不会触发的。当从操作系统拖拽文件到浏览器的时候，dragstart 和 dragend 事件不会触发。

拖动某元素时，依次触发以下事件

dragstart
当一个元素被拖拽的时候触发。

drag
触发 dragstart 后，随即会触发 drag 事件，而且在元素被拖动期间会持续触发该事件。

dragend
拖动停止时触发。（无论元素是放到了有效的放置目标还是无效的放置目标上）

元素拖放到有效的放置目标上时，依次触发以下事件

dragenter
元素被拖放到放置目标上触发。

dragover
被拖动的元素在放置目标范围内移动时，会持续触发该事件。

dragleave
元素被拖出了放置目标，触发该事件，并且 dragover 事件不再发生。

drop
元素被放到了放置目标中，触发该事件。

拖放步骤

定义拖拽目标

定义拖拽数据

（可选）设置拖动反馈图片

设置拖动效果

定义放置目标

拖放后的逻辑处理

定义拖拽目标

默认情况下，图像、链接和已选中的文本是可以拖动的。文本需要被选中才能拖动，而图像和链接在任何时候都可以拖动。

让其他元素可拖动也是可以的。HTML5 为所有 HTML 元素规定了一个 draggable 属性，表示是否可以拖动。图像和链接的 draggable 属性自动被设置成了 true，其他元素是 false。

// 设置图像不可拖动


// 设置这个元素可以拖动
可拖动的DIV

支持 draggable 属性的浏览器有 IE 10+、Firefox 4+、Safari 5+、Chrome 和 Opera 12+。

定义拖拽数据

我们有时会需要在拖放操作时进行数据交换，IE 引入了 dataTransfer对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递数据。因为它是事件对象的属性，所以只能在拖放事件中访问，不能多带带创建。目前，HTML5 规范也收入了 dataTransfer 对象。

实现数据交换主要用到两个方法：getData(type)和setData(type, data)。type表示保存的数据类型，取值为“text”或“URL”，getData() 通过 setData() 设置的 type 来取到保存的值。

function dragStart(e) {
    // 设置文本数据
    e.dataTransfer.setData("text", "hello world");
    // 设置URL
    e.dataTransfer.setData("URL", "www.seiue.com");
}

function drop(e) {
    // 接收文本数据
    var text = e.dataTransfer.getData("text");
    // 接收URL
    var url = e.dataTransfer.getData("URL");
}

drag.addEventListener("dragStart", dragEnter, false);
drop.addEventListener("drop", drop, false);

建议总是添加 text/plain和text/uri-list来替代text和URL，因为后者存在兼容问题并且最终会被映射为前者。

设置拖动反馈图片

当发生一次拖拽时（dragstart 事件触发的元素），会在拖拽的元素处产生一个半透明的图片（该元素副本），并且会在拖拽过程中跟随鼠标移动，这就是反馈图片。这个图片是自动生成的，无需你亲自设定，但可以通过setDrawImage来自定义一个反馈图片。

setDrawImage是 dataTransfer 对象的一个方法。

event.dataTransfer.setDrawImage(image, xOffset, yOffset)

需要传入三个参数，分别是：一个图片的引用（可以是图片元素对象、canvas或其他元素对象），图像内的水平偏移量，图像内的垂直偏移量。下面的例子定义了一个反馈图片。

function dragCustomImage(e) {
  var img = document.createElement("img")
  img.setAttribute("src", "drag-img.jpeg")

     e.dataTransfer.setDragImage(img, 150, 150)
}

设置拖动效果

dataTransfer 对象不光能够传输数据，还能通过它来确定被拖动元素以及防止目标元素能够接收什么操作。主要用到两个属性：dropEffect和effectAllowed。

dropEffect

可以知道被拖动的元素能够执行哪种放置操作。这个属性有4个值。

none: 禁止把拖放的元素放在这里。

move: 可以把拖放的元素移动到放置目标。

copy: 可以把拖放的元素复制到放置目标。

link: 放置目标会打开拖动的元素（拖动的元素必须是一个链接，有URL）。

把元素拖放到放置目标时，以上的每个值都会导致光标显示不同的符号。每种操作触发什么样的行为需要你来自行实现，浏览器不会帮你移动、复制和打开链接。要使用 dropEffect，我们需要在 dragenter事件处理程序中设置它的属性。

effectAllowed

dropEffect 属性需要搭配 effectAllowed 属性才生效。effectAllowed 属性表示允许拖动元素的哪种 dropEffect。effectAllowed 有以下值。

none: 被拖动的元素不能有任何行为。

copy: 只允许值为”copy“的 dropEffect。

link: 只允许值为“link” 的 dropEffect。

move: 只允许值为“move”的 dropEffect。

copyLink: 允许值为“copy”和“link”的 dropEffect。

copyMove: 允许值为“copy”和“move”的 dropEffect。

linkMove: 允许值为“link”和“move“的 dropEffect。

all: 允许任意 dropEffect。

需要在dragstart事件处理程序中设置它的属性。

定义放置目标

所有元素都支持放置目标事件，但这些元素默认是不允许放置的。如果拖动的元素拖放到了不允许放置的元素，是不会触发drop 事件的。
把元素变成有效的放置目标，需要重写dragenter和dragover事件的默认行为。

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

dropTarget.addEventListener("dragenter", function(e) {
    e.preventDefault();
}, false);

dropTarget.addEventListener("dragover", function(e) {
    e.preventDefault();
}, false);

处理拖放后的做的事情

在drop事件发生时做一些事情，你可能想要获取拖拽目标携带的数据并做某些相应的事情。

参考资料

拖放操作 | MDN

拖拽操作 | MDN

DataTransfer | MDN

拖拽类型列表 | MDN

JavaScript高级程序设计（第3版）第16章 HTML5 脚本编程 - 原生拖放

专线服务服务器托管原生拖放 html5拖放上传 html5 原生拖放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91680.html

不在HTML5标准中的特性 —— 浅谈原生拖放

摘要：久等的标准年月日，正式公布了耗时年时间制订的标准。尽管标准在最近才正式公布，但激动人心的特性一早就被开发者热议了。在这份标准当中有一个我们熟悉的身影并没有出现，那就是原生拖放。月日发布的版本当中没有原生拖放。久等的HTML5标准 2014年10月28日，W3C正式公布了耗时8年时间制订的 HTML5 标准。尽管标准在最近才正式公布，但 HTML5 激动人心的特性一早就被开发者热议了。...

littleGrow 2019-08-02 18:06 评论0 收藏0
HTML5 原生拖放

摘要：发展原生拖放的发展大致可分为三个阶段。在的实例基础上，进一步制定了拖放的规范。也根据规范实现了原生拖放功能。被拖动的元素在放置目标范围内移动时，会持续触发该事件。参考资料拖放操作拖拽操作拖拽类型列表高级程序设计第版第章脚本编程原生拖放发展原生拖放的发展大致可分为三个阶段：IE4、IE5+、HTML5。 IE4 是最早在网页中引入 JavaScript 拖放功能的，当时只有图像和选中...

gaara 2019-08-05 11:13 评论0 收藏0
JavaScript HTML5脚本编程——“原生拖放”的注意要点

摘要：在中，唯一有效的放置目标是文本框。以的实例为基础指定了拖放规范。触发事件后，随即会触发事件，而且在元素被拖动期间会持续发送该事件。指定一副图像，当拖动发生时，显示在光标下方。最早在网页中引入JavaScript拖放功能是IE4。当时，网页中只有两种对象可以拖放：图像和某些文本。在IE4中，唯一有效的放置目标是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且几乎网页中的任何元...

forsigner 2019-08-19 17:35 评论0 收藏0
JavaScript HTML5脚本编程——“原生拖放”的注意要点

摘要：在中，唯一有效的放置目标是文本框。以的实例为基础指定了拖放规范。触发事件后，随即会触发事件，而且在元素被拖动期间会持续发送该事件。指定一副图像，当拖动发生时，显示在光标下方。最早在网页中引入JavaScript拖放功能是IE4。当时，网页中只有两种对象可以拖放：图像和某些文本。在IE4中，唯一有效的放置目标是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且几乎网页中的任何元...

maochunguang 2019-08-02 18:30 评论0 收藏0
HTML5原生拖放事件的学习与实践

摘要：前言之前学习了的拖放事件，开发中也用到了拖拽组件。具体实现的效果也很简单元素可以在容器中任意拖动，元素被移入容器的时候，还会有相关样式的改变已达到更好的展示效果。例子基本运用了拖放事件的全部事件，并且尽量简洁的展示了出来。前言之前学习了HTML5的拖放事件，开发中也用到了拖拽组件。为了厘清整体的逻辑，专门做了一个小例子。具体实现的效果也很简单：元素可以在容器中任意拖动，元素被移入...

王陆宽 2019-08-23 17:02 评论0 收藏0