Question

小提琴几乎解释了所有事情：http://jsfiddle.net/1zqdsar6/3/

我有一个可排序的元素容器，可以放在列表项上。列表项通过选项卡分组到几个不同的列表中。用户应该能够通过更改选项卡（在拖动项目时将鼠标悬停在选项卡上）并将其放在所需的列表项上来删除所需列表项上的元素。

我可以在拖动过程中切换标签，但是，新打开的标签的列表项不会被JQueryUI识别为可放置。只有在拖动开始时可见的列表项才会被识别为droppable。有没有办法在拖动过程中“刷新”可投放项目（例如，切换标签时）？

我注意到，当您在拖动过程中切换到选项卡并将元素移动到最右侧，以便显示水平滚动条时，新打开的选项卡的列表项将变为可放置。这可能是对可能解决方案的暗示。

感谢您的帮助！

编辑：我知道refreshPositions：True，但这是超级慢。选项卡更改的触发刷新将是我的首选解决方案。

--- JS-Fiddle JS-code ---

$("#elemContainer").sortable();
$(".sidebar-list-item").droppable({
    accept: ".elem",
    hoverClass: "active",
    tolerance: "pointer",
    drop: function (event, ui) {
        ui.draggable.remove();
    },
});
$(".sidebar-tab").droppable({
    // make tabs droppable, to detect, when to switch to different list
    accept: ".elem",
    tolerance: "pointer",
    over: function (event, ui) {
        $(this).tab("show");
    }
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // tab was switched
    console.log($(e.target)); // activated tab
    e.relatedTarget // previous tab
})

在拖动期间（更改选项卡时）未更新jQuery UI droppable

0 个答案: