这篇博文介绍了有关拖放的基础知识。
创建可拖动的内容
在大多数浏览器中,默认情况下,文本选择内容、图片和链接都是可拖动的。例如,如果您拖动网页上的链接,您会看到一个包含标题和网址的小框,您可以将它拖放到地址栏或桌面上,以创建快捷方式或导航到该链接。若要使其他类型的内容可拖动,您需要使用 HTML5 拖放 API。
如需使对象可拖动,请在相应元素上设置 draggable=true
。几乎任何内容都可以启用拖动功能,包括图片、文件、链接、文件或页面上的任何标记。
以下示例创建了一个接口,用于重新排列使用 CSS 网格布局的列。列的基本标记如下所示,其中每列的 draggable
属性设置为 true
:
<div class="container">
<div draggable="true" class="box">A</div>
<div draggable="true" class="box">B</div>
<div draggable="true" class="box">C</div>
</div>
以下是容器和框元素的 CSS。与拖动功能相关的唯一 CSS 是 cursor: move
属性。代码的其余部分控制容器和框元素的布局和样式。
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}
此时,您可以拖动这些项,但不会发生其他任何操作。如需添加行为,您需要使用 JavaScript API。
监听拖动事件
若要监控拖动过程,您可以监听以下任何事件:
如需处理拖动流程,您需要某种源元素(拖动开始的位置)、数据载荷(正在拖动的内容)和目标(用于捕捉拖放内容的区域)。源元素几乎可以是任何类型的元素。目标是接受用户尝试放置的数据的放置区域或放置区域组。并非所有元素都可以作为目标。例如,目标不能是图片。
开始和结束拖动序列
在内容中定义 draggable="true"
属性后,附加 dragstart
事件处理脚本,以启动每列的拖动序列。
此代码会在用户开始拖动列时,将不透明度设置为 40%,并在拖动事件结束时将列的不透明度恢复为 100%。
function handleDragStart(e) {
this.style.opacity = '0.4';
}
function handleDragEnd(e) {
this.style.opacity = '1';
}
let items = document.querySelectorAll('.container .box');
items.forEach(function (item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragend', handleDragEnd);
});
以下 Glitch 演示显示了结果。拖动项目后,其不透明度会发生变化。由于源元素具有 dragstart
事件,因此将 this.style.opacity
设置为 40% 会为用户提供视觉反馈,表明该元素是当前要移动的所选元素。放下相应项时,源元素会恢复为 100% 不透明度,即使您尚未定义放下行为。
添加其他视觉提示
为帮助用户了解如何与您的界面互动,请使用 dragenter
、dragover
和 dragleave
事件处理脚本。在此示例中,这些列除了可以拖动之外,还是放置目标。当用户将拖动的项置于列上方时,使边框变为虚线,以帮助用户理解这一点。例如,在 CSS 中,您可以为作为拖放目标的元素创建 over
类:
.box.over {
border: 3px dotted #666;
}
然后,在 JavaScript 中,设置事件处理脚本,在列被拖动时添加 over
类,并在被拖动的元素离开时移除该类。在 dragend
处理程序中,我们还确保在拖动操作结束时移除这些类。
document.addEventListener('DOMContentLoaded', (event) => {
function handleDragStart(e) {
this.style.opacity = '0.4';
}
function handleDragEnd(e) {
this.style.opacity = '1';
items.forEach(function (item) {
item.classList.remove('over');
});
}
function handleDragOver(e) {
e.preventDefault();
return false;
}
function handleDragEnter(e) {
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
}
let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});
});
此代码有几点需要介绍:
dragover
事件的默认操作是将dataTransfer.dropEffect
属性设置为"none"
。本页面的后面部分会介绍dropEffect
属性。目前,您只需要注意它会阻止drop
事件触发。如需替换此行为,请调用e.preventDefault()
。另一个好的做法是在同一处理程序中返回false
。dragenter
事件处理脚本用于切换over
类,而不是dragover
。如果您使用dragover
,当用户将拖动的项悬停在列上时,该事件会反复触发,从而导致 CSS 类反复切换。这会使浏览器执行大量不必要的渲染工作,从而影响用户体验。我们强烈建议您尽量减少重复绘制,如果您需要使用dragover
,请考虑对事件监听器进行限制或去抖动。
完成空降
如需处理放下事件,请为 drop
事件添加事件监听器。在 drop
处理程序中,您需要阻止浏览器的默认拖放行为,这通常是某种令人厌烦的重定向。为此,请调用 e.stopPropagation()
。
function handleDrop(e) {
e.stopPropagation(); // stops the browser from redirecting.
return false;
}
请务必与其他处理程序一起注册新的处理程序:
let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});
如果此时运行代码,项不会放到新位置。为此,请使用 DataTransfer
对象。
dataTransfer
属性包含拖动操作中发送的数据。dataTransfer
在 dragstart
事件中设置,并在拖放事件中读取或处理。通过调用 e.dataTransfer.setData(mimeType, dataPayload)
,您可以设置对象的 MIME 类型和数据载荷。
在本例中,我们将允许用户重新排列各列的顺序。为此,首先需要在拖动操作开始时存储源元素的 HTML:
function handleDragStart(e) {
this.style.opacity = '0.4';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
在 drop
事件中,您可以通过将源列的 HTML 设置为放置数据的目标列的 HTML 来处理列删除。这包括检查用户是否没有回退到从拖动时使用的同一列。
function handleDrop(e) {
e.stopPropagation();
if (dragSrcEl !== this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
在下面的演示中可以看到结果。为此,您需要使用桌面浏览器。移动设备不支持 Drag and Drop API。拖动并释放 B 列顶部的 A 列,注意这两列的位置如何变化:
更多拖动属性
dataTransfer
对象公开属性,以便在拖动过程中向用户提供视觉反馈,并控制每个放置目标如何响应特定数据类型。
dataTransfer.effectAllowed
限制了用户可以对元素执行的“拖动类型”。它用在拖放处理模型中,用于在dragenter
和dragover
事件期间初始化dropEffect
。该属性可以具有以下值:none
、copy
、copyLink
、copyMove
、link
、linkMove
、move
、all
和uninitialized
。dataTransfer.dropEffect
用于控制用户在dragenter
和dragover
事件期间获得的反馈。当用户将指针悬停在目标元素上时,浏览器的光标会指示将要执行的操作类型,例如复制或移动。效果可以采用以下值之一:none
、copy
、link
、move
。e.dataTransfer.setDragImage(imgElement, x, y)
表示您可以设置拖动图标,而不使用浏览器的默认“重影”反馈。
上传文件
这个简单示例使用列作为拖动来源和拖动目标。这可能会发生在要求用户重新排列列表的界面中。在某些情况下,拖动目标和拖动来源可能是不同的元素类型,例如在界面中,用户需要将所选图片拖动到目标上,选择一张图片作为商品的主图片。
拖放操作经常用于让用户将项目从桌面拖放到应用中。主要区别在于 drop
处理程序。其数据包含在 dataTransfer.files
属性中,而不是使用 dataTransfer.getData()
访问文件:
function handleDrop(e) {
e.stopPropagation(); // Stops some browsers from redirecting.
e.preventDefault();
var files = e.dataTransfer.files;
for (var i = 0, f; (f = files[i]); i++) {
// Read the File objects in this FileList.
}
}
如需了解详情,请参阅自定义拖放。