如何让 Jquery UI 的 Droppable 在其左上角进入内部时接受 Draggable？ [关闭]

Posted 2023-05-08

【中文标题】如何让 Jquery UI 的 Droppable 在其左上角进入内部时接受 Draggable？ [关闭]

【英文标题】：How to make a Jquery UI's Droppable accept a Draggable when its top left corner gets inside? [closed]

【发布时间】：2018-07-01 15:08:22

【问题描述】：

经过一些测试，当 Draggable 的中心在 Droppable 中时，我的 Droppable 元素只接受 Draggable 元素。

当 Draggable 的左上角在 Droppable 内时，如何更改此行为以接受 Draggable？

注意： Draggables 比 Droppables 大。

【问题讨论】：

我认为 API 中有些东西我没有看到

@AlonEitan 这个问题可能缺乏他实际测试的一些证据，但我认为只要你熟悉 jQuery UI 的行话（Draggable 和Droppable，在这种情况下）。不过，我将对其进行编辑以使其更加清晰。

【参考方案1】：

也许droppable's tolerance option 的一些非默认值对您来说是一个不错的选择，尽管它们不会完全按照您的要求进行。

来自文档：

指定用于测试可拖动对象是否悬停在可放置对象上的模式。可能的值：

"fit": Draggable 与 droppable 完全重叠。 "intersect": Draggable 在两个方向上至少与 droppable 重叠 50%。 "pointer"：鼠标指针与 droppable 重叠。 "touch": Draggable 与 droppable 任意重叠。

默认是"intersect"。我会考虑使用"pointer" 或"touch"。

或者，如果你真的需要使用左上角作为参考，那么你应该覆盖$.ui.intersect，这是一个负责根据容差模式检查可拖动和可放置是否相交的函数。如果他们这样做，它应该返回true，否则返回false。它看起来像这样：

$.ui.intersect = function (draggable, droppable, toleranceMode) 

    swtich(toleranceMode) 
        // Check if they intersect based on the selected mode.
        default:
            return false;
    

您需要重新定义该函数并添加自定义 case 块，同时还要保留原始模式。否则，依赖于它的代码的其他部分（可能是其他一些 jQuery UI 组件）将会中断。

但是，这只适用于 jQuery UI 1.12。如果您使用的是较新版本，则必须覆盖其他一些方法。您可以在此处找到带有代码示例的详细答案：Build the matching option for jQuery UI Droppable's Intersect tolerance

【讨论】：

对不起，这个问题不清楚，这就是我一直在寻找的！谢谢！

这是正确答案。我也在寻找同样的东西。 “指针”是您正在寻找的。当您放置可拖动对象时，它会在光标下方的可放置元素上触发可放置元素。当您的拖动元素大于可放置元素时，很难将中心移动到可放置元素中。尤其是当您使用包含元素并试图将其移动到边缘时。