0

小提琴几乎解释了一切：http: //jsfiddle.net/1zqdsar6/3/

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

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

我注意到，当您在拖动过程中切换到选项卡并将元素移动到最右边时，水平滚动条就会出现，然后新打开的选项卡的列表项变为可放置的。这可能是对可能解决方案的提示。

谢谢你的帮助！

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

--- JS-Fiddle JS 代码 ---

$("#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
})
4

0 回答 0