2

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

1. 我是对的，不能将可拖动元素与放置区域连接起来吗？

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

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

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

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

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

4

1 回答 1

2

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

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

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

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

所以回答问题：

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

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

于 2012-11-28T20:34:05.717 回答