JavaScript 原生拖放笔记

最新推荐文章于 2024-09-09 09:17:33 发布

萱萱的七彩鱼

最新推荐文章于 2024-09-09 09:17:33 发布

阅读量425

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript firefox 前端

本文链接：https://blog.youkuaiyun.com/Hello__World123/article/details/122172192

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

1、拖放事件

dragstart（在按住鼠标键不放并开始移动鼠标的那一刻，被拖动元素会触发该事件，拖动开始时，可以在ondragstart事件处理程序中通过JavaScript处理某些操作。）
drag（dragstart事件触发后，只要目标还被拖动就会持续触发drag事件。这个事件类似于mousemove，即随着鼠标移动不断触发。）
dragend（当拖动停止时，即把元素放到有效或无效的防止目标上时，会触发该事件。）

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

dragenter
dragover
dragleave或drop

这些事件的目标是放置目标元素。

2、自定义放置目标位置
在把某个元素拖动到无效放置目标上时，会看到一个特殊光标（圆环中间一条斜杠）表示不能放下。即使所有元素都支持放置目标事件，这些默认元素也是不允许放置的。如果把元素拖动到不允许放置的目标上时，无论用户动作是什么都不会触发drop事件。不过，可以通过覆盖dragenter和dragover事件的默认行为，可以把任何元素转换为有效的放置目标。例如：如果有一个id为“droptarget”的

元素，那么可以使用以下代码把他转换成一个放置目标：

let droptarget = document.getElementById("droptarget"); 
droptarget.addEventListener("dragover", (event) => { 
 event.preventDefault(); 
}); 
droptarget.addEventListener("dragenter", (event) => { 
 event.preventDefault(); 
});

执行上面代码之后，把元素拖动到这个

上应该可以看到光标变成个允许放置的样子。另外，drop事件也会触发。
在firefox中，放置事件的默认行为是导航到放在放置目标上的URL。这意味着把图片拖动到放置目标上会导致页面导航到图片文件，把文本拖动到放置目标上会导致无效URL错误。为阻止这个行为，在firefox中必须取消drop事件的默认行为：

droptarget.addEventListener("drop", (event) => { 
 event.preventDefault(); 
});

3、dataTransfer对象
该对象是用来访问拖动事件触发时的访问对象。
该对象暴露在拖放事件的事件处理程序内部的event对象的属性上。dataTransfer对象主要有两个方法：getData() 和 setData()。getData()是用来获取setData()存储的值。setData()的第一个参数以及getData()的唯一参数是一个字符串。表示要设置的数据类型：“text”或“url”，如下所示：

// 传递文本
event.dataTransfer.setData("text", "some text"); 
let text = event.dataTransfer.getData("text"); 
// 传递 URL 
event.dataTransfer.setData("URL", "http://www.wrox.com/"); 
let url = event.dataTransfer.getData("URL");

并且他们会分别被映射到“text/plain”和"text/uri-list"。
dataTransfer对像可以同时保存文本和url，两者不会相互覆盖。
直到版本 5，Firefox都不能正确地把"url"映射为"text/uri-list"或把"text"映射为"text/plain"。
不过，它可以把"Text"（第一个字母大写）正确映射为"text/plain"。在通过 dataTransfer 获取
数据时，为保持最大兼容性，需要对 URL 检测两个值并对文本使用"Text"：

let dataTransfer = event.dataTransfer; 
// 读取 URL 
let url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list"); 
// 读取文本
let text = dataTransfer.getData("Text");

4、dropEffect 与 effectAllowed
dataTransfer 对象不仅可以用于实现简单的数据传输，还可以用于确定能够对被拖动元素和放置
目标执行什么操作。为此，可以使用两个属性：dropEffect 与 effectAllowed。
dropEffect 属性可以告诉浏览器允许哪种放置行为。这个属性有以下 4 种可能的值。

“none”：被拖动元素不能放到这里。这是除文本框之外所有元素的默认值。
“move”：被拖动元素应该移动到放置目标。
“copy”：被拖动元素应该复制到放置目标。
“link”：表示放置目标会导航到被拖动元素（仅在它是 URL 的情况下）。

为了使用 dropEffect 属性，必须在放置目标的 ondragenter 事件处理程序中设置它。
除非同时设置 effectAllowed，否则 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。

必须在 ondragstart 事件处理程序中设置这个属性。

5、可拖动能力
为了让其他元素变得可以拖动。HTML5 在所有 HTML 元素上规定了一个 draggable 属性，
表示元素是否可以拖动。图片和链接的 draggable 属性自动被设置为 true，而其他所有元素此属性
的默认值为 false。如果想让其他元素可拖动，或者不允许图片和链接被拖动，都可以设置这个属性。
例如：

<!-- 禁止拖动图片 --> 
<img src="smile.gif" draggable="false" alt="Smiley face"> 
<!-- 让元素可以拖动 --> 
<div draggable="true">...</div>