I have a web app where the user can drag items between many different groups with each group having its own list for the items to go in. The groups themselves fall into different containers that have fixed heights and need to be scrollable while the user is dragging an item.
Essentially I have:
<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>
This items are sortable connected to any '.items' list. When dragging an item they need to be draggable between both the middle and right containers so I am using appendTo: 'body' to resolve z-index issues. The middle container and left container both have fixed heights (and thus separate scroll bars) and need to be scrollable if the drag goes near the top/bottom boundaries of that container.
$('.items').sortable({
connectWith: '.items',
opacity: 0.6, revert: true, cursor: 'move', cancel: '.incomplete',
appendTo: 'body',
helper: 'clone',
placeholder: 'item-drop-placeholder'
});
Using this configuration the middleContainer / rightContainer do not scroll while a drag is occuring. Instead the entire body scrolls. I have tried to implement my own routine to handle scrolling the corresponding container while dragging with the following addition to the .sortable options.
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);
}
}
The custom scroll routine works and the containers scroll as I wish while dragging however the sort connection to other lists stops function outside of the initial view bounds.
For example if I have an item in group1 in the middle container. I drag it and it is sortable between the different groups. If group 4 is visible to the right of group 1 without scrolling I can drag it over to group 4 without problem.
If I drag it towards the bottom of the middle container and scroll the container down, however, and group 12 for example is now scrolled into view. I can not sort the item into group 12 since it was not in view when the drag began. If group 1 is still visible after scrolling down I can drop the item in a lower position in the list in group 1 then pick it back up and move it to group 12.
How can I adjust this to be able to drop it directly in group 12 after having scrolled down?