javascript - 使用小部件工厂扩展时，JQuery UI Droppable 贪婪选项不起作用

Question

当我使用小部件工厂扩展 jQuery UI 可放置小部件时，贪婪选项不再起作用。 请参阅以下JsBin

Answer 1

我调查了这个问题，问题如下:

当在元素上创建小部件时，小部件实例将作为数据属性保存到该元素，以便在必要时检索该实例。用于保存实例的关键是小部件的“widgetFullName”属性，它是小部件的命名空间和名称，例如。对于“ui-droppable”的 droppable。如果我扩展小部件并为小部件设置新的命名空间和名称，则创建的实例将使用新的命名空间名称键保存到元素中。

到目前为止一切顺利。

问题在于，在 droppable(以及其他相关小部件，如draggable、sortable 和 ddmanager)的逻辑中，使用以下选择器搜索 droppable:

":data(ui-droppable)"

“ui-droppable”是硬编码的，因此它不会找到由扩展 droppable 创建的任何实例，因为 key 不同。

我试图通过用 this.widgetFullName 替换所有硬编码的“ui-droppable”键来解决这个问题。这在 ui.droppable 的代码内部工作得很好，但在外面， this 不再引用 droppable ，因此 widgetFullName 不是正确的键。要解决此问题，需要进行更多调查并更改逻辑。

仍然有一种“肮脏”的方法来解决这个问题，但这有一个缺点:

我没有扩展小部件，而是重新定义了它:

$.widget('ui.droppable', ui.droppable, {
  extension of the widget
};

命名空间不会更改，并且会按预期工作，缺点是您重新定义了小部件，并且无法创建不同的可放置对象。