Javascript 切换div后的遗漏效应（jquery可拖动/可拖放）

我使用jquery的Dragable和Dropable来实现拖放功能： 有两个选项卡，每个选项卡包含一个可拖放区域。现在，我可以选择一个可拖动的选项卡并将其移动到另一个选项卡-在拖动过程中，当我移动到该选项卡上时，该选项卡会发生变化。（如果将文件从一个目录移动到另一个目录，则与WinExplorer女士一样…）。为了指示用户位于可拖放区域之上，我使用hoverClass选项

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

$('.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...
    }
});

$（'.drag'）。可拖动({
还原：“无效”，
助手：函数（）{
返回$（''）.addClass（'drag-dragging'）.appendTo（'body'）.text（$（this.text（））；
}
});
$（“#panel-1-droppable，#panel-2-droppable”）.droppable({
接受“拖动”，
hoverClass:“面板下拉框”，
结束：函数（）{
//只是想看看这件事
$（'#over state'）.text（'Mouseover with draggable['+$（this.attr（'id'）+']）；
}
});
$（'.panel tab'）。可拖放({
结束：函数（）{
//正在更改选项卡。。。
}
});

我创建了一个测试场景来重现问题：

---

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

将刷新位置设置为TRUE的问题已解决

---

jQuery UI中的可排序插件不是您所需要的吗？它具有您想要实现的主要功能。。那么您可以操纵其余的功能？请看这里：jquerysortable可能是一个解决方案。但是我仍然在寻找一个解决方案来让我当前的实现工作起来。我需要使用sortable重新创建一些“特殊”的DropZone（目前还不知道…）。