如何防止触发多个 jQuery UI droppables？

Posted 2023-05-08

【中文标题】如何防止触发多个 jQuery UI droppables？

【英文标题】：How do I prevent multiple jQuery UI droppables from being triggered?

【发布时间】：2010-11-20 12:01:45

【问题描述】：

我有一个jQuery UI draggable 和几个单独定义的droppables。因为其中一个 droppable 被配置为 tolerance: 'intersect'，所以可以将一个可拖动对象同时拖放到多种 droppable 上。

防止意外触发的最佳方法是什么？基本上，我想优先处理 droppable，这样如果触发了另一个 droppable，tolerance: 'intersect' 的 droppable 就不会被触发。

更新 - 更多信息以澄清事情：

所有可放置对象都配置为tolerance: 'pointer'，除了一类可放置对象为tolerance: 'intersect'。

一类droppable有tolerance: 'intersect'的原因是droppables真的很窄，用户用tolerance: 'pointer'很难找到它们。

将 droppable 移得更远不是一种选择。

没有任何可放置对象重叠，但可拖动对象足够大，可以与 tolerance: 'intersect' 重叠放置，而鼠标指针位于带有 tolerance: 'pointer' 的可放置对象上方。这种方式最多可以同时触发两个droppable。

UI 的布局使得用户的意图可以通过忽略tolerance: 'intersect' droppable 来确定，如果另一个droppable 已被触发；即，如果用户将鼠标指针移动到带有tolerance: 'pointer' 的可放置对象上，则可以安全地假设他/她打算将其放置在那里。问题是，我不知道如何忽略不需要的 droppable。

【问题讨论】：

你能告诉我这些问题的最佳解决方案吗，因为我也有同样的问题，如果你还记得 :)

【参考方案1】：

在over: 中，将一个类分配给预期的droppable，并从所有其他droppable 中删除该类：

$(".dragArea").not($(this)).removeClass("dragHover");
$(this).addClass("dragHover");

然后在drop:中，检查类是否设置：

if(!$(this).is('.dragHover'))
    return false;

这样，只会触发一个 droppable。

【讨论】：

我可以确认这可行（jquery-ui 1.9.1 & jqery 1.8.2）谢谢

【参考方案2】：

也许在“不太喜欢”的 droppable 过度事件中，您可以检查 draggable 是否也在“preferred” droppable 之上，以及它是否禁用了“不太喜欢”的 droppable。

抱歉术语，只是想集思广益。

【参考方案3】：

使它们彼此远离物理距离，以免它们同时掉落。否则，您应该如何确定用户的意图？你要计算每个相交的 droppable 上可拖动的百分比吗？

【讨论】：

嗨，杰森，感谢您的回答。请参阅我最初的问题中的第一个更新以获取您的问题的答案。

您可以截取您想要完成的任务的屏幕截图吗？