分配键盘快捷键以拖放网页中的元素

Question

我的 Web 应用程序的其中一个页面具有拖放功能。已使用 jquery 处理事件。我想仅使用键盘复制鼠标的拖放操作。我相信这会使我的应用程序更易于访问。有办法吗？感谢您的帮助。

Answer 1

Accessible Drag and Drop Using WAI-ARIA

This article is intended for people who create rich internet applications with drag and drop functionality and want to make them accessible. No prior knowledge of WAI-ARIA is assumed, although it is recommended you read my introduction to WAI-ARIA article before starting this article. A basic knowledge of scripting is assumed, and is necessary to understand exactly what is going on in the code example, but this knowledge is not necessary to understand the basic concepts discussed.

使用 WAI-ARIA 拖放

WAI-ARIA 提供了两个属性来帮助使用辅助技术的用户进行拖放操作：

aria-grabbed
aria-dropeffect

Accessible Drag and Drop Example

Answer 2

您可能需要提供完全不同的视图，因为即使使用 ARIA，您仍然无法复制物理移动控件的需要。

一个例子是列出用户可以移动的所有对象，并在每个对象中提供一组选项，供用户将其移动到哪里。

例如，这里有一个要移动的项目（复制并根据需要更改字母）：

<div id="itemA">
  <p>
    <strong>Item A</strong>
  </p>
  <p>
    <label for="selA">Move to:</label><br>
    <select id="selA">
      <option value="c1">Column 1</option>
      <option value="c2">Column 2</option>
      <option value="c3">Column 3</option>
    </select><br>
    <button onclick="MoveItem('itemA',selA.value);">Move</button>
  </p>
</div>

这里是它可以移动到的容器（我使用 table 只是因为我假装你使用的是网格，但你的容器可以是 structurally/semantically 合适的任何容器）：

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td id="c1"></td>
    <td id="c2"></td>
    <td id="c3"></td>
  </tr>
</table>

我不使用 jQuery，但我相信您可以将这个简单的 JavaScript 函数抽象为您喜欢的语法：

function MoveItem(itemID, colID) {
  try {
    var Item = document.getElementById(itemID);
    var Col = document.getElementById(colID);
    Col.appendChild(Item);
  } catch (e) {
    console.log('MoveItem(): ' + e);
  }
}

就是这样。没有ARIA，没有图书馆，不用担心流动性。

我还有整个示例作为 CodePen，因此您可以试一试，看看它是如何工作的：http://codepen.io/aardrian/pen/OXkaLW

分配键盘快捷键以拖放网页中的元素

Assign keyboard shortcuts to drag and drop elements in a webpage

jquery

accessibility

drag-and-drop

keyboard-shortcuts

keyboard-events

Accessible Drag and Drop Using WAI-ARIA