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

Question

经过一些测试，当 Draggable 的中心位于 Droppable 中时，我的 Droppable elements only accept Draggable 元素。

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

注意： Draggables 比 Droppables 大。

Answer 1

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

来自文档：

Specifies which mode to use for testing whether a draggable is hovering over a droppable. Possible values:

• "fit": Draggable overlaps the droppable entirely.
• "intersect": Draggable overlaps the droppable at least 50% in both directions.
• "pointer": Mouse pointer overlaps the droppable.
• "touch": Draggable overlaps the droppable any amount.

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

或者，如果你真的需要使用左上角作为参考，那么你应该覆盖 $.ui.intersect，这是负责检查 dragabble 和 droppable 是否相交的函数，基于宽容模式。如果他们这样做，它应该 return 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。如果您使用的是较新的版本，则必须覆盖其他一些方法。您可以在此处找到带有代码示例的详细答案：