可访问多个项目的拖放

>本文展示了为多个元素处理和键盘可访问性增强HTML5拖放功能，从而使视力和屏幕阅读器用户受益。 假设对拖放API的基本熟悉（请参阅初学者的介绍性文章），我们将重点放在扩展其功能上。

> dataTransfer虽然多个元素的核心数据操作很简单（使用单独的数组而不是

），但用户界面的复杂性显着增加。 由于本机拖放缺乏后者，我们将解决选择前的机制和键盘支持。 注意：触摸事件和浏览器多填充不在本文的范围之内。 呈现的解决方案在单页中起作用，而不是跨窗户。

> 密钥改进：

>增强了用于多项项目选择和键盘导航的拖放式拖放，改善了可访问性。
一个数组在拖动过程中跟踪多个元素，简化了ID不是静态的动态环境（例如CMS系统）的集成。
• aria-grabbed使用ARIA属性（aria-dropeffect>，
）和标准键击（用于选择的空间，控制M/命令M用于drop）的键盘可访问性。
• 简化的接口避免了连续的选择，将所有修饰符键同样处理以进行非连续选择。
>动态ARIA属性更新可确保无缝的交叉模式（鼠标/键盘）交互。
>强大的跨浏览器兼容性解决了诸如drop事件的问题，诸如使用命令键在mac/webkit上启动的问题（使用
• 用于删除最终确定）。dragend>

基本的拖放（简化示例）：> 一个功能示例使用鼠标相互作用演示了单个元素的基本拖放。 该代码维护项目参考，而不是依靠

来用于元素ID，简化了过程并改善了对服务器端应用程序的适应性。 由于浏览器支持不一致，

和dataTransfer被省略。 可拖动属性是通过JavaScript动态应用的，分开关注点并允许排除破裂的实现（例如旧的Opera版本）。 HTML使用effectAllowed>属性进行识别。dropEffect> data-draggable

>可访问的拖放实现：

> 可访问性是最重要的。 我们将遵守ARIA的拖放惯例指南：>

1. 可拖动的元素使用aria-grabbed="false"，并且是键盘navigable。
>
2. SpaceBar选择元素； aria-grabbed在选择时变为“ true”。
>
3. 控制M/命令M最终确定选择（第一个下降目标的快捷方式）。
目标元素使用
4. 指示允许的动作。aria-dropeffect>
控制M/命令M或Enter在目标元素上执行Drop Action。>
5. 逃脱取消操作。
6. >后行动清理重置
和
7. 。aria-dropeffect> aria-grabbed
>我们将增强这些建议：选择结束的击键是可选的，并且控制M/命令M被补充用于丢弃的Enter。 为简单起见，所有修饰符键（换档，控制，命令）启用无连续选择。

>

多个选择（鼠标和键盘）：

> 代码添加>和

>属性到可拖动元素。鼠标选择使用

>（单/重置）和（取消/多重）。 键盘选择使用aria-grabbed与空格键一起选择，处理用于多个选择的修饰符。 Atabindex属性确保选择仅限于单个容器。 mousedown，mouseup和keydown>函数管理选择状态。selections.owner> addSelection removeSelection拖动选择（鼠标和键盘）：clearSelections

>

用于指示有效的下降目标。 选择时键盘交互添加。 对于鼠标的相互作用，

和

事件使用Aaria-dropeffect>变量和aria-dropeffect="move">函数来处理事件冒泡。 dragenter从目标容器中的项目中删除，以改善键盘导航。 dragleave related丢弃选择（鼠标和键盘）：getContainer> tabindex

事件（鼠标）处理掉落并重置。 由于浏览器不一致而省略了

事件。 键盘交互在目标容器上使用事件来处理滴滴，管理焦点以避免重置问题。

进一步的增强：dragend drop未来的改进可能包括触摸/指针事件支持，浏览器多填充，选择排序，可自定义的副本/移动操作，连续选择，自定义拖动幽灵和拖动过程中的视觉提示。 该代码可在github上找到（原始文本中提供的链接）。keydown>

FAQS：

>常见问题解答部分提供了有关可访问拖放实现的常见问题的清晰简洁答案，涵盖了多个元素，可辍学的区域，订单控制，错误处理和测试。

>

以上是可访问多个项目的拖放的详细内容。更多信息请关注PHP中文网其他相关文章！