ユーザーが多くの異なるグループ間でアイテムをドラッグして、各グループにアイテムを入れるための独自のリストを作成できる Web アプリがあります。アイテム。
基本的に私は持っています：
<body>
<div id='leftContainer'>Fitlers And Other Stuff Over Here</div>
<div id='middleContainer'>
<div id='group1'>
<ul class='.items'>
<li class='.item' id='item1'></li>
<li class='.item' id='item2'></li>
</ul>
</div>
<div id='group2'>
<ul class='.items'>
</ul>
</div>
<div id='group3'>
<ul class='.items'>
<li class='.item' id='item3'></li>
</ul>
</div>
....
<div id='groupN'>
<ul class='.items'>
<li class='.item' id='itemN'></li>
</ul>
</div>
</div>
<div id='rightContainer'>
<div id='specialGroup'>
<ul class='.items'>
<li class='.item' id='item4></li>
<li class='.item' id='item5></li>
</ul>
</div>
</div>
</body>
このアイテムは、任意の「.items」リストに接続してソート可能です。アイテムをドラッグするときは、中央と右の両方のコンテナー間でドラッグできる必要があるため、z-index の問題を解決するために appendTo: 'body' を使用しています。中央のコンテナと左のコンテナの高さはどちらも固定されており (したがって、別々のスクロール バー)、ドラッグがそのコンテナの上下の境界に近づいた場合にスクロール可能である必要があります。
$('.items').sortable({
connectWith: '.items',
opacity: 0.6, revert: true, cursor: 'move', cancel: '.incomplete',
appendTo: 'body',
helper: 'clone',
placeholder: 'item-drop-placeholder'
});
この構成を使用すると、ドラッグが発生している間、middleContainer / rightContainer はスクロールしません。代わりに、体全体がスクロールします。.sortable オプションに次の追加を加えて、ドラッグ中に対応するコンテナーのスクロールを処理する独自のルーチンを実装しようとしました。
scroll: false,
sort: scrollContainersDuringItemDrag
function scrollContainersDuringItemDrag(event, ui) {
if (event.pageX is within middleContainerBoundary) {
if (event.pageY is near bottom of middle container)
$('#middleContainer').scrollTop($('#middleContainer').scrollTop() + 30);
else if (event.pageY is near top of middle container)
$('#middleContainer').scrollTop($('#middleContainer').scrollTop() - 30);
}
else if (event.pageX is within rightContainerBoundary) {
if (event.pageY is near bottom of right container)
$('#rightContainer').scrollTop($('#rightContainer').scrollTop() + 30);
else if (event.pageY is near top of right container)
$('#rightContainer').scrollTop($('#rightContainer').scrollTop() - 30);
}
}
カスタム スクロール ルーチンが機能し、コンテナーはドラッグ中に希望どおりにスクロールしますが、他のリストへの並べ替え接続は、最初のビュー境界の外で機能しなくなります。
たとえば、中間のコンテナに group1 のアイテムがあるとします。それをドラッグすると、異なるグループ間で並べ替えることができます。グループ 4 がスクロールせずにグループ 1 の右側に表示されている場合、問題なくグループ 4 にドラッグできます。
ただし、それを中央のコンテナの下部に向かってドラッグし、コンテナを下にスクロールすると、たとえばグループ 12 がスクロールして表示されます。ドラッグが開始されたときにアイテムが表示されていなかったため、アイテムをグループ 12 に並べ替えることができません。下にスクロールしてもグループ 1 がまだ表示されている場合は、その項目をグループ 1 のリストの下の位置にドロップしてから、グループ 12 に移動します。
下にスクロールした後、グループ 12 に直接ドロップできるようにするにはどうすればよいですか?