4

我正在使用 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/

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

4

1 回答 1

0

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

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

于 2013-03-19T07:58:24.797 回答