拖拽是 Web 应用中常用的交互方式。然而，针对视力或身体上有障碍的用户来说，通常需要特殊的技术支持才能实现无障碍的拖拽效果。在本文中，我们将介绍如何使用一些简单的技术来实现无障碍拖拽，并且让更多用户都能够使用。
开始实现
首先，我们需要创建一个包含拖拽元素的页面。在这个例子中，我们将使用一个列表，其中每个元素都是可拖拽的。示例代码如下：
<ul id="list"> <li draggable="true">Item 1</li> <li draggable="true">Item 2</li> <li draggable="true">Item 3</li> </ul>
基本的拖拽实现
为了实现基本的拖拽功能，我们需要在 JavaScript 中添加拖拽事件处理程序。下面是一个示例：
const list = document.getElementById('list');
list.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.textContent);
});在这个示例中，我们将 dragstart 事件处理程序附加到列表元素上。当用户开始拖动一个元素时，浏览器将触发此事件。我们使用 setData 方法将文本数据放入 dataTransfer 对象中。这样，当用户停止拖动元素时，将把该数据传递给任何成功拖动到的目标。
为了使列表元素可拖拽，我们添加了 draggable="true" 属性，这会告诉浏览器该元素可以被拖动。
让拖拽更可访问
为了使我们的拖拽更可访问，我们需要添加一些 ARIA 属性。ARIA 是一组规范，用于描述如何使 Web 内容和 Web 应用程序更为可访问。在我们的示例中，我们可以添加类似于以下内容的代码：
<ul id="list" role="listbox" aria-orientation="vertical"> <li role="option" draggable="true" aria-selected="false">Item 1</li> <li role="option" draggable="true" aria-selected="false">Item 2</li> <li role="option" draggable="true" aria-selected="false">Item 3</li> </ul>
这些属性有以下用途：
role="listbox"：告诉屏幕阅读器这是一个列表框。role="option"：告诉屏幕阅读器这是选项元素。aria-selected="false"：告诉屏幕阅读器尚未选中该元素。
提供拖拽目标
在我们的示例中，我们希望用户能够拖动一个元素到另一个元素上，从而改变它们之间的顺序。为此，我们需要添加一个拖动目标。我们可以在 dragover 事件中高亮拖动目标，以表明用户可以将拖动元素放在该目标上：
-- -------------------- ---- -------
--------------------------------- --- -- -
-------------------
----- ------------- - ----------------------------- ------------
-- --------------- -
-----------------------------------------
-
----- ------ - -----------------------
-- -------- -
-------------------------------
-
---在这个示例中，我们使用 preventDefault 方法使浏览器知道我们允许拖动到该目标元素上。我们使用 closest 方法找到最接近的 li 元素，并将其添加到 active 类中。
将元素放置在目标上
当用户停止拖动元素时，我们需要将元素放置在目标上。我们可以在 drop 事件处理程序中完成此操作：
-- -------------------- ---- -------
----------------------------- --- -- -
-------------------
----- ------------- - ----------------------------- ------------
-- --------------- -
-----------------------------------------
-
----- ------ - -----------------------
-- -------- -
-----------------------------
-
---在这个示例中，我们使用 before 方法将活动元素插入到目标元素之前。我们同样使用 closest 方法找到最接近的 li 元素，并将其移动到列表中。
让拖拽更明显
为了让拖动行为对所有用户更明显，我们可以使用一些 CSS 样式来为拖动元素添加特殊效果。以下是一个示例：
-- -------------------- ---- ------- -- - ----------------- -------- ------- --- ----- ----- -------- ----- -------------- ----- - --------- - ----------------- ----- -
在这个示例中，我们为列表元素添加了一些 CSS 样式，以便在用户拖动时提供视觉反馈。我们使用 active 类来为拖动目标添加特殊效果。
结论
无障碍的拖拽是一个实现起来非常简单且非常重要的功能。通过添加一些 ARIA 属性和 CSS 样式，我们可以为所有用户提供更好的拖动体验。在这个例子中，我们演示了如何实现基本的拖拽功能，并为有特殊需求的用户提供了更好的拖拽支持。我们希望这篇文章对你有所帮助，并鼓励你在你的 Web 应用中实现无障碍的拖拽效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6715dd92ad1e889fe2193b36