具有多个不同放置目标、dropEffect、多选等的 HTML5 拖放

Question

我目前正在试验 HTML5 Drag and Drop API。现在我有几个问题：

1。 我说得对吗，不能将可拖动元素与放置区域连接起来？

示例：您希望能够拖放两种不同类型的元素：文件和文本标签。现在，如果我给一些 div 一个 DragOver-Handler 和一个 Drop-Handler 它将同时响应文件和文本标签。我正在寻找一种仅响应特定类型的可拖动项目的简单可能性。

一个相关的问题是 dropEffect 光标样式：目前我在 DragStart-Handler 中启用所有可能的放置目标并在 DragEnd-Handler 中禁用所有它们（“禁用”我的意思是，我删除所有DragOver 和 Drop 处理程序）。如果我不这样做，看起来就像您可以将文件放在只对文本标签做出反应的元素上。

2。 dropEffect 光标样式是一团糟。在 Firefox 中我根本没有得到它们，在 Chrome 中它会给我一个大的“加号”图标（即使我已经从元素中删除了 DragOver- 和 Drop-Handlers）

3。 我正在寻找的最后一个功能是多选：选择多个文本标签，然后一次拖动所有标签。这可能吗？我的第一个想法是创建一个新的 div 并将所有选定的元素移动到该 div 内，然后拖动新创建的 div。看起来很hackish，看起来很丑;-)

我希望你们能给我一些答案。谢谢！

Answer 1

我不认为 HTML5 拖放（和朋友）应该替代常用的“拖放”Javascript 库（尽管在某些情况下可以使用它来代替它们）。这个名字具有误导性。

现代操作系统包括允许跨应用程序通信的 API：剪贴板和拖放。这两个 API 非常相似，并且由于特定的挑战需要非常低级：

• 数据必须跨进程发送，因此必须以某种方式进行序列化，
• 发送者必须能够以多种格式（例如 text/plain 和 text/html）提供数据，而接收者必须能够选择它最喜欢的一种，
• 发送者和接收者可能生活在不同的进程中，因此他们永远无法相互了解（他们甚至可能是来自不同平台、GUI 框架、编程语言等的实体），唯一的通信渠道是数据本身，

当前的 HTML5 APIS，相对于 - 比如说 - JQueryUI 可拖动 - 并不是要让程序员严格控制拖动过程的外观和感觉，而是实现与本机系统范围机制的紧密集成。这可能是程序员需要的，也可能不是。

所以回答问题：

1. 您不能“将可拖动元素与放置区域连接起来”，因为您的可拖动元素甚至可以来自浏览器外部。但是您可以创建一个拒绝某些类型数据的区域（这是用户对原生拖放的期望）。
2. “div”和“multiselect”不是操作系统可以理解的（我们没有原生的多剪贴板或多文本选择）。如果您使用可以切换的内部 div（例如，按住 shift 时单击），则可以实现此类功能。当有人试图拖动外部潜水时，制作一个传输对象，说明选择了哪些内部潜水（您甚至可以创建显示它们的图像）。

如果上述解决方案听起来有点低级，那是因为它们确实如此。当您开发桌面游戏或工具时，您不依赖原生拖放来在棋盘上移动棋子或在 GUI 中移动滑块。我认为 JavaScript 也会如此。 JQueryUI Draggables 不会去任何地方。