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

Posted 2023-05-08

【中文标题】jQuery UI Droppable：如何让它活起来？

【英文标题】：jQuery UI Droppable : how to make it live?

【发布时间】：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，并且一次将事件附加到所有这些事件太昂贵了。我希望仅在需要时附加事件，即在放置操作时，仅用于那些真正需要它的事件。

有道理。我认为尽管在鼠标悬停事件上执行了这种可放置的行为。仅在 将鼠标悬停在顶部之后才制作可放置的东西听起来并不可行。

【参考方案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 之类的方法来绑定元素，但不确定。