I’ve got a couple of jquery sortables inside containers that scroll vertically. When dragging between those containers items can be added to a sortable by dragging below the container. Consider the following html:
<style>
.constrainer {
height: 160px;
overflow-y: auto;
width:280px;
border: 1px solid orange;
}
.sortitem {
border: 1px solid #807eba;
width: 160px
display:inline-block;
padding: 10px;
margin: 10px;
background-color: white;
}
</style>
<div class="constrainer" style="float:left">
<ul class="sortme">
<li class="sortitem">item 1</li>
<li class="sortitem">item 2</li>
<li class="sortitem">item 3</li>
<li class="sortitem">item 4</li>
<li class="sortitem">item 5</li>
<li class="sortitem">item 6</li>
</ul>
</div>
<div class="constrainer" style="float:right">
<ul class="sortme">
<li class="sortitem">item 1</li>
<li class="sortitem">item 2</li>
<li class="sortitem">item 3</li>
<li class="sortitem">item 4</li>
<li class="sortitem">item 5</li>
<li class="sortitem">item 6</li>
</ul>
</div>
And the following script:
$('.sortme').sortable({connectWith: '.sortme'});
Note that you can easily drag an item from one of the lists to another list by hitting BELOW the list.
I’d like to prevent dragging to a list that is cut off. In my actual application there is a much more complicated DOM structure, so the actual solution needs to find the actual area of the sortable that is in-view and allow dropping only in that area. Same for re-ordering items in a single sortable.
Here is a jsfiddle of the code above:
http://jsfiddle.net/PFSsJ/
Edit: Clarification
To be clear, I still want to drag items to the part of the list that is visible, just not the part of the list that is invisible. For even more fun, arrange the lists vertically such that jquery ui can’t decide which one to drop it on and it flickers back and forth like this: http://jsfiddle.net/PFSsJ/1/
I spent about two weeks working on various solutions to this problem. The code below is working for me in the application I’m building. Note that it only deals with sortables that are stacked vertically and scroll vertically. It could probably be modified to deal with horizontal sortables but I haven’t tried as it doesn’t fit my use-case.
You use it just like a sortable, just $(‘.ulClass’).boundedSortable();