HTML5拖放有多个不同的放置目标,dropEffect,multiselect等

时间:2012-10-22 11:51:11

标签: html5 drag-and-drop

我目前正在尝试使用HTML5拖放API。现在我有几个问题:

1。 我是对的,不可能将可拖动元素连接到丢弃区域吗?

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

连接问题是dropEffect游标样式:目前我在DragStart-Handler中启用所有可能的drop-targets并在DragEnd-Handler中禁用所有这些目标(“禁用”我的意思是,我删除所有DragOver-和Drop-Handlers)。如果我不这样做,那么看起来你可以将文件放在一个只应该对文本标签作出反应的元素上。

2。 dropEffect游标样式很乱。在Firefox中我根本没有得到它们,在Chrome中它会给我一个很大的“加” - 图标(即使我已经从元素中删除了DragOver-和Drop-Handlers)

3。 我正在寻找的最后一个功能是多选:选择多个文本标签,然后一次拖动所有这些。这可能吗?我的第一个想法是创建一个新的div并移动这个div中的所有选定元素,然后拖动新创建的div。看起来非常h​​ackish,看起来很丑陋;-)

我希望你们能为我找到一些答案。谢谢!

1 个答案:

答案 0 :(得分:2)

我不认为HTML5拖放(和朋友)应该是常用的拖放"拖放" Javascript库(虽然在某些情况下可以使用它代替它们)。这个名字具有误导性。

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

  • 数据必须跨进程发送,因此必须以某种方式序列化,
  • 发件人必须有办法以多种格式提供数据(例如text / plain和text / html),接收者能够选择最喜欢的数据,
  • 发送者和接收者可能生活在不同的过程中,因此他们永远不会发现彼此(他们甚至可能是来自不同平台,GUI框架,编程语言等的实体),唯一的通信渠道就是数据本身,

当前的HTML5 APIS与JQueryUI draggables相反,并不是要让程序员严格控制拖动过程的外观,而是要实现与本机系统范围机制的紧密集成。这可能是程序员所需要的,也可能不是。

所以回答问题:

  1. 你不能将可拖动元素与drop-area连接起来,因为你的可拖动元素甚至可以来自浏览器之外。但是你可以创建一个拒绝某些类型数据的区域(这是用户期望从本机拖放的数据)。
  2. " DIV"和" multlectlect"不是操作系统理解的东西(我们没有本机多cliboards或多文本选择)。如果您使用可以切换的内部div(例如,通过在按住shift时单击)来实现此功能。当有人试图拖动外部潜水时,制作一个转移对象,说明选择了哪些内部div(您甚至可以创建一个显示它们的图像)。
  3. 如果上述解决方案听起来有点低级,那么 - 因为它们是。当您开发桌面游戏或工具时,您不依赖于本机拖放来移动棋盘中的棋子或在GUI中移动滑块。我认为它与JavaScript相同。 JQueryUI Draggables不会去任何地方。