jQuery droppable - 如何在短时间内对悬停做出反应？

Question

我正在使用 jQuery Draggable/droppable 将（div）从一个列表拖到另一个列表。两个列表都有固定数量的列表项，并且列表项本身可以为空或已包含 div。

我正在将 div 拖到列表项。如果列表项已经包含一个 div，那么我希望将该 div 下推到其下方的列表项 - 以便为我正在拖动的 div 让路。我可以通过 droppable 中的“over”事件来做到这一点。但我希望只有在用户暂停一段时间（比如 0.5 秒）之后才会发生这种情况。我该怎么做？

另外，如果用户决定不掉落，那么我希望移位的物品返回到其原始位置。再说一遍，实现这一目标最简单的方法是什么？

感谢您的帮助

威廉

Answer 1

我只是碰巧在做类似的事情。就我而言，我使用的是 treeTable 插件。如果一棵倒塌的树悬停了一段时间，我想展开它。这是我到目前为止所拥有的。我今天正好在做这件事。请注意使用超时来延迟操作。

var timeout = null;
var clear = function() {
    if (timeout) {
        clearTimeout(timeout);
        timeout = null;
    }
}

$(".selector").droppable({
    over: function(e, ui) {
        if (! $(this).is("expanded")) {
            clear();
            timeout = setTimeout(function() {
                $(this).expand();
                timeout = null;
            }, 1000);
        }
    }
    , out: clear
    , drop: function(e, ui) {
        clear();
        ...
    }
});

我仍然有这个问题。一个分支展开后，其下方的行将被下推，为展开的分支腾出空间。我还没有放下，所以我将鼠标悬停在扩展分支中的第一个新元素上。问题是这个元素没有得到hoverClass，被推到新分支下面的第一个元素得到了它。就像 jquery 没有意识到它被向下移动了一样。根据您的描述，我想您很可能会遇到这个问题。

我使用的是 jquery-1.4.2，但后来我更新到 jquery-1.6.4，看看是否可以解决问题。两个版本都表现出相同的行为。另外，我在 Chrome 14.0.835.202、Opera 11.52、Firefox 3.6.23 和 IE7.0.5730.13 中对此进行了测试。它们都以同样的方式发生。所以，要么是 jquery 有 bug，要么是我做了一些事情导致了这个问题。

关于你的第二个问题。我不确定我完全理解你要追求什么。您是否正在寻找