Question

我使用jquery的draggable和droppable来实现drag'n'drop-functionalality：有两个选项卡，每个选项卡包含一个带有可拖动的可放置区域。现在我可以选择一个可拖动的移动到另一个选项卡 - 当我在拖动过程中移动选项卡时，选项卡会更改。（就像MS WinExplorer一样，如果你将文件从一个目录移动到另一个目录......）。为了表明用户位于可放置区域之上，我使用了hoverClass-option。

问题：在拖动过程中多次更改标签后，鼠标悬停效果丢失。如果浏览器大小需要滚动条并且我将带有可拖动的指针移动到其中一个浏览器边框（以便浏览器滚动），则显示悬停效果....我已经将事件添加到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/

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

Answer 1

问题解决了在TRUE上设置refreshPositions。

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

切换div后缺少过量效果（jquery draggable / droppable）

1 个答案: