javascript - 切换 div 后缺少过度效果(jquery 可拖放/可拖放)

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

问题:在拖动过程中多次更改选项卡后，悬停效果丢失。如果浏览器大小需要滚动条，并且我将带有可拖动的指针移动到浏览器边框之一(以便浏览器滚动)，则会显示悬停效果...。我已经将 over 事件添加到 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/

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

最佳答案

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

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

关于javascript - 切换 div 后缺少过度效果(jquery 可拖放/可拖放)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15427264/