【发布时间】:2014-08-13 09:20:39
【问题描述】:
(JSFiddle 在底部)
在我正在开发的应用程序中,用户可以将 jQuery UI 可拖动项从平面列表映射到叶节点是 jQuery UI droppables 的树上。平面列表中的项目可以一一映射,但用户也可以使用多选来抓取任意数量的项目,然后一次性将它们拖放到同一个 droppable 中。
当用户选择大量项目时,可拖动助手会变得很长。这会在尝试将项目放在靠近树底部的节点上时导致问题。
我所追求的行为是将项目放置在鼠标光标当前所在的叶节点(可放置)上。这似乎在所有情况下都有效,除非您到达列表底部。光标将向下移动,但可拖动对象将保持原位(不能再进一步)。而不是拖放到鼠标光标所在的可放置对象上,可拖动对象将被放置在鼠标光标 预期位置下方的可放置对象上(基于 cursorAt 属性),或者至少看起来是 。
我尝试了许多设置和更改,但我无法控制这种行为。我发现使用搜索指向可放置对象上的tolerance: "pointer" 设置的大多数解决方案,但我已经使用了它,但它并不能解决问题。我的助手克隆了可拖动对象并在其上设置了“指针事件:无”,但这似乎也无关紧要(我也可以删除助手函数并且行为相同)。
这是一个错误吗?有没有办法解决它?帮助将不胜感激。如果需要更多信息,请告诉我。谢谢!
JSFiddle 重现问题:http://jsfiddle.net/1odvbmah/4/
编辑:免责声明:JSFiddle 是我可以重现该问题的最简单方法。因此,有些事情与实际情况并不完全一样。我将可放置容器卡在底部以限制可拖动。在实际情况下,droppables 列表是可滚动的,但可拖动项不能超出该列表的底部。产生的行为完全相同。所以一个小的 CSS 改变并不能解决我真正的问题:)
第二次编辑:更改 cursorAt 值也不是解决方案。在实际情况下,draggable 可以变得比屏幕高度高,而树形控件(带有 droppables)几乎是整个页面高度。
【问题讨论】:
-
我不知道我是否理解你的问题,但如果它是可拖动的卡在窗口底部。为什么不初始化光标顶部,左侧到可拖动的'90%'左右。
cursorAt: { left: 90, top: 90} -
因为那样会出现同样的问题,但在顶部。在实际情况下,树形控件与页面一样高,并且可拖动对象可能会变得高于屏幕高度。
标签: jquery jquery-ui drag-and-drop jquery-ui-draggable jquery-ui-droppable