フィドルはほとんどすべてを説明しています: http://jsfiddle.net/1zqdsar6/3/
リスト項目にドロップできる要素のソート可能なコンテナーがあります。リスト項目は、タブを介していくつかの異なるリストにグループ化されます。ユーザーは、タブを変更して (項目をドラッグしながらタブの上にカーソルを置いて)、目的のリスト項目に要素をドロップすることで、目的のリスト項目に要素をドロップできる必要があります。
ドラッグ中にタブを切り替えることはできますが、新しく開いたタブのリスト項目が JQueryUI によってドロップ可能として認識されません。ドラッグ開始時に表示されていたリスト項目のみがドロップ可能として認識されます。ドラッグ中にドロップ可能なアイテムを「更新」する方法はありますか (たとえば、タブが切り替えられたとき)?
ドラッグ中にタブに切り替えて要素を右に移動すると、水平スクロールバーが表示されるようになり、新しく開いたタブのリスト項目がドロップ可能になることに気付きました。解決のヒントになるかもしれません。
助けてくれてありがとう！
編集: 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
})