HTML5具有多个不同拖放目标、dropEffect、multiselect等的拖放功能

HTML5具有多个不同拖放目标、dropEffect、multiselect等的拖放功能,html,drag-and-drop,Html,Drag And Drop,我目前正在试验HTML5拖放API。现在我有几个问题: 一,。 我说得对吗,不可能将可拖动的元素与放置区域连接起来 示例:您希望能够拖放两种不同类型的元素:文件和文本标签。现在,如果我给一些div一个DragOver处理程序和一个Drop处理程序,它将同时响应文件和文本标签。我正在寻找一个简单的可能性,只回应一个特定类型的拖拉项目 一个相关的问题是dropEffect光标样式:目前,我在DragStart处理程序中启用所有可能的拖放目标,并在Dragen处理程序中禁用所有这些目标(使用“disa

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

一,。 我说得对吗,不可能将可拖动的元素与放置区域连接起来

示例:您希望能够拖放两种不同类型的元素:文件和文本标签。现在,如果我给一些div一个DragOver处理程序和一个Drop处理程序,它将同时响应文件和文本标签。我正在寻找一个简单的可能性,只回应一个特定类型的拖拉项目

一个相关的问题是dropEffect光标样式:目前,我在DragStart处理程序中启用所有可能的拖放目标,并在Dragen处理程序中禁用所有这些目标(使用“disable”我的意思是,我删除了所有DragOver和drop处理程序)。如果我不这样做,看起来就像你可以把一个文件放到一个只对文本标签有反应的元素上

二,。 dropEffect光标样式非常混乱。在Firefox中我一点也不懂,在Chrome中它会给我一个大大的“加号”图标(即使我已经从元素中删除了DragOver和Drop处理程序)

三,。 我要寻找的最后一个功能是多选:选择多个文本标签,然后一次拖动所有标签。这可能吗?我的第一个想法是创建一个新的div,并将所有选定的元素移到这个div中,然后拖动新创建的div。看起来很粗糙,看起来很难看;-)


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

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

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

  • 数据必须跨进程发送,因此必须以某种方式序列化
  • 发送方必须能够以多种格式(如文本/纯文本和文本/html)提供数据,接收方必须能够选择自己最喜欢的格式
  • 发送方和接收方可能生活在不同的过程中,因此他们永远无法了解对方(他们甚至可能是来自不同平台、GUI框架、编程语言等的实体),唯一的通信渠道是数据本身
当前的HTML5API,与JQueryUI拖拉表相反,并不是为了让程序员严格控制拖拉过程的外观和感觉,而是为了实现与本机系统范围机制的紧密集成。这可能是程序员需要的,也可能不是

因此,要回答这些问题:

  • 您不能“将可拖动图元与放置区域连接”,因为您的可拖动图元甚至可以来自浏览器外部。但您可以创建一个拒绝特定类型数据的区域(这是用户从本机拖放中所期望的)
  • “div”和“multiselect”不是操作系统能够理解的东西(我们没有本地多剪贴板或多个文本选择)。如果使用可切换的内部div(例如,在按住shift键的同时单击),则可以实现此类功能。当有人试图拖动外部div时,创建一个transfer对象,说明选择了哪些内部div(您甚至可以创建一个显示这些div的图像)
  • 如果上述解决方案听起来有点低级,那是因为它们是。当您开发桌面游戏或工具时,您不需要依靠本机拖放在棋盘上移动棋子或在GUI中移动滑块。我认为JavaScript也是如此。JQueryUI Draggables不会去任何地方