jQuery UI Droppable：如何让它活起来？答案

【问题标题】：jQuery UI Droppable : how to make it live?jQuery UI Droppable：如何让它活起来？
【发布时间】：2011-04-28 01:35:54
【问题描述】：

在this question 中，当鼠标进入要拖动的元素时，动态创建可拖动对象。

我想做同样的事情，但使用 droppables ：决定是否仅在拖动元素到达它时才使元素可放置。我确信这是可能的，但经过一些研究，我无法做到。

我尝试过这样的事情，但失败了：

jQuery.fn.liveDroppable = function (opts) {
    this.live("mouseover", function() {
        if (!$(this).data("livedropinit")) {
            $(this).data("livedropinit", true).droppable(opts);
            $(this).trigger('dropover');
        }
    });
};

【问题讨论】：

为什么要这样做？除非有东西悬停在顶部，否则 droppable 无论如何都没有可见的功能。
@Noufal ：因为我有很多 droppables，并且一次将事件附加到所有这些事件太昂贵了。我希望仅在需要时附加事件，即在放置操作时，仅用于那些真正需要它的事件。
有道理。我认为尽管在鼠标悬停事件上执行了这种可放置的行为。仅在将鼠标悬停在顶部之后才制作可放置的东西听起来并不可行。

标签： jquery drag-and-drop live

【解决方案1】：

我通过使用this post 中描述的可拖动方法将其绑定到 JQuery 来实现此功能。唯一的问题是它似乎在我目前正在调查的嵌套 droppables 上存在问题。这是修改后的版本。我不得不把它改成“mouseenter”。

(function ($) {
       $.fn.liveDroppable = function (opts) {
          this.live("mouseenter", function() {
             if (!$(this).data("init")) {
                $(this).data("init", true).droppable(opts);
             }
          });
       };
}(jQuery));

现在不要这样称呼它：

$(selector).droppable({opts});

...只需使用：

$(selector).liveDroppable({opts})

【讨论】：

至少在 Firefox 上的 jquery 1.10 中，mouseenter 和 mouseover 事件在拖动时不会被调用，因此该解决方案仅适用于用户在开始拖动之前移动过的元素。

【解决方案2】：

这对你有用吗？这是 .hover();功能。不确定您是否尝试过。 http://api.jquery.com/hover/

【讨论】：

您可能只需执行 .hover() 并附加 html 或其他内容，以便它具有可悬停标签。您可能必须使用诸如 livequery 之类的方法来绑定元素，但不确定。