切换 div 后缺少过度效果（jquery 可拖动/可放置）答案

【问题标题】：Missing over-effect after switched div (jquery draggable/droppable)切换 div 后缺少过度效果（jquery 可拖动/可放置）
【发布时间】：2013-03-15 07:53:31
【问题描述】：

我正在使用 jquery 的可拖放和可拖放来实现拖放功能：有两个选项卡，每个选项卡都包含一个带有可拖动的可放置区域。现在我可以选择一个可拖动的并将其移动到另一个选项卡 - 当我在拖动过程中移动选项卡时选项卡会发生变化。（就像 MS WinExplorer，如果您将文件从一个目录移动到另一个目录......）。为了表明用户位于可放置区域之上，我使用了 hoverClass 选项。

问题：在拖动过程中多次更改选项卡后，悬停效果丢失。如果浏览器大小需要滚动条，并且我将带有可拖动的指针移动到浏览器边框之一（以便浏览器滚动），则会显示悬停效果...。我已经将过度事件添加到 droppable 以检查它是否总是被触发 - 但事实并非如此。

$('.drag').draggable({
    revert: 'invalid',
    helper: function () {
        return $('<div></div>').addClass('drag-dragging').appendTo('body').text($(this).text());
    }
});

$('#panel-1-droppable,#panel-2-droppable').droppable({
    accepts: 'drag',
    hoverClass: 'panel-dropover',
    over: function () {
        // just to check the over-event
        $('#over-state').text('Mouseover with draggable [' + $(this).attr('id') + ']');
    }
});

$('.panel-tab').droppable({
    over: function () {
        // changing tab...
    }
});

我已经创建了一个测试场景来重现该问题：http://jsfiddle.net/CKYJs/5/

我希望我已经提供了所有必要的信息......

【问题讨论】：

不是你需要的从 jQuery UI 排序的插件吗？它具有您想要实现的主要功能......所以您可以操纵其余功能？看这里：jqueryui.com/sortable/#connect-lists-through-tabs
jquery-sortable 可能是一个解决方案。但我仍在寻找一种解决方案来让我目前的实施工作。我需要使用 sortable 重新创建“特殊”放置区（目前没有任何想法......）。

标签： javascript jquery draggable droppable

【解决方案1】：

问题已解决，将 refreshPositions 设置为 TRUE。

http://api.jqueryui.com/draggable/#option-refreshPositions

【讨论】：