I'm using jquery ui's sortable function with several connected lists. These lists is contained inside draggable, resizeable divs with an "overflow: auto" on the divs. The problem I have comes to when I place one div with alot of list-items(‹li›) above another.
Top div contains a lot of li elements which means it actually extends far below than actually shown. This means when I move one of the elements in the bottom div the element will jump between the top div's sortable list(which shouldn't happen, because its hidden) and the bottom div's sortable list making it flicker between the two.
This is a major issue because it's hard for the user to drop the li in the right div if this is how he/she placed their divs.
What I want is the li only to connect with the list which div it's currently hovering over.
Anyone know how to fix this?
Technical details
The bottom div as example:
<div style="height: 310px; width: 200px; z-index: 14; left: 909px; top: 215px; position: absolute;" class="Category ui-draggable ui-resizable p-resize-snap" id="cat883">
<input type="hidden" value="310" id="hiddenHeight883" name="ctl00$MainContentPlaceHolder$hiddenHeight883"><div style="height: 20px;" class="CategoryHeader">
<table style="table-layout: fixed;">
<tbody><tr>
<td style="width: 16px;"><a onclick="return ToggleLinks("883");" href="#">^</a></td><td class="categoryNameTD"><span class="categoryName">Games </span><span style="display: none;"><input type="checkbox" name="ctl00$MainContentPlaceHolder$cbxCat883" id="cbxCat883"></span></td><td style="width: 16px;"><a onclick="return Edit();" href="#">E</a></td>
</tr>
</tbody></table>
</div><div style="height: 274px; overflow: auto; border-bottom: 1px dotted rgb(221, 221, 221);" id="catLinks883">
<div class="CategoryLinks">
<ul style="list-style-type: none; margin: 0px; padding: 0px;" class="drpList ui-sortable"><li style=""><div class="drpLink">
<table style="width: 100%; table-layout: fixed;">
<tbody><tr>
<td style="width: 16px;"><img style="height: 16px; width: 16px;" alt="@" src="http://www.youtube.com/favicon.ico"></td><td style="overflow: hidden; white-space: nowrap;"><a target="_blank" href="http://www.youtube.com/" title="Youtube">Youtube</a></td><td style="width: 16px;"><span style="display: none;"><input type="checkbox" name="ctl00$MainContentPlaceHolder$cbx722" id="cbx722"></span></td>
</tr>
</tbody></table>
</div></li><li style=""><div class="drpLink">
<table style="width: 100%; table-layout: fixed;">
<tbody><tr>
<td style="width: 16px;"><img style="height: 16px; width: 16px;" alt="@" src="http://www.metacritic.com/favicon.ico"></td><td style="overflow: hidden; white-space: nowrap;"><a target="_blank" href="http://www.metacritic.com/" title="Metacritic - Movie Reviews, TV Reviews, Game Re...">Metacritic - Movie Reviews, TV Reviews, Game Re...</a></td><td style="width: 16px;"><span style="display: none;"><input type="checkbox" name="ctl00$MainContentPlaceHolder$cbx710" id="cbx710"></span></td>
</tr>
</tbody></table>
</div></li><li style="display: list-item;"><div class="drpLink">
<table style="width: 100%; table-layout: fixed;">
<tbody><tr>
<td style="width: 16px;"><img style="height: 16px; width: 16px;" alt="@" src="http://www.myspace.com/favicon.ico"></td><td style="overflow: hidden; white-space: nowrap;"><a target="_blank" href="http://www.myspace.com/" title="MySpace">MySpace</a></td><td style="width: 16px;"><span style="display: none;"><input type="checkbox" name="ctl00$MainContentPlaceHolder$cbx725" id="cbx725"></span></td>
</tr>
</tbody></table>
</div></li><li style=""><div class="drpLink">
<table style="width: 100%; table-layout: fixed;">
<tbody><tr>
<td style="width: 16px;"><img style="height: 16px; width: 16px;" alt="@" src="http://www.fz.se/favicon.ico"></td><td style="overflow: hidden; white-space: nowrap;"><a target="_blank" href="http://www.fz.se/" title="FZ">FZ</a></td><td style="width: 16px;"><span style="display: none;"><input type="checkbox" name="ctl00$MainContentPlaceHolder$cbx707" id="cbx707"></span></td>
</tr>
</tbody></table>
</div></li><li style=""><div class="drpLink">
<table style="width: 100%; table-layout: fixed;">
<tbody><tr>
<td style="width: 16px;"><img style="height: 16px; width: 16px;" alt="@" src="http://n4g.com/favicon.ico"></td><td style="overflow: hidden; white-space: nowrap;"><a target="_blank" href="http://n4g.com/" title="N4G.com : All the latest game news">N4G.com : All the latest game news</a></td><td style="width: 16px;"><span style="display: none;"><input type="checkbox" name="ctl00$MainContentPlaceHolder$cbx708" id="cbx708"></span></td>
</tr>
</tbody></table>
</div></li><li style=""><div class="drpLink">
<table style="width: 100%; table-layout: fixed;">
<tbody><tr>
<td style="width: 16px;"><img style="height: 16px; width: 16px;" alt="@" src="http://www.facebook.com/favicon.ico"></td><td style="overflow: hidden; white-space: nowrap;"><a target="_blank" href="http://www.facebook.com/" title="Facebook">Facebook</a></td><td style="width: 16px;"><span style="display: none;"><input type="checkbox" name="ctl00$MainContentPlaceHolder$cbx724" id="cbx724"></span></td>
</tr>
</tbody></table>
</div></li><li style=""><div class="drpLink">
<table style="width: 100%; table-layout: fixed;">
<tbody><tr>
<td style="width: 16px;"><img style="height: 16px; width: 16px;" alt="@" src="http://www.quakelive.com/favicon.ico"></td><td style="overflow: hidden; white-space: nowrap;"><a target="_blank" href="http://www.quakelive.com/" title="QUAKE LIVE">QUAKE LIVE</a></td><td style="width: 16px;"><span style="display: none;"><input type="checkbox" name="ctl00$MainContentPlaceHolder$cbx713" id="cbx713"></span></td>
</tr>
</tbody></table>
</div></li><li style=""><div class="drpLink">
<table style="width: 100%; table-layout: fixed;">
<tbody><tr>
<td style="width: 16px;"><img style="height: 16px; width: 16px;" alt="@" src="http://lifehacker.com/favicon.ico"></td><td style="overflow: hidden; white-space: nowrap;"><a target="_blank" href="http://lifehacker.com/" title="Lifehacker, tips and downloads for getting thin...">Lifehacker, tips and downloads for getting thin...</a></td><td style="width: 16px;"><span style="display: none;"><input type="checkbox" name="ctl00$MainContentPlaceHolder$cbx721" id="cbx721"></span></td>
</tr>
</tbody></table>
</div></li><li style=""><div class="drpLink">
<table style="width: 100%; table-layout: fixed;">
<tbody><tr>
<td style="width: 16px;"><img style="height: 16px; width: 16px;" alt="@" src="http://quicksilverscreen.com/favicon.ico"></td><td style="overflow: hidden; white-space: nowrap;"><a target="_blank" href="http://quicksilverscreen.com/" title="http://quicksilverscreen.com/">http://quicksilverscreen.com/</a></td><td style="width: 16px;"><span style="display: none;"><input type="checkbox" name="ctl00$MainContentPlaceHolder$cbx723" id="cbx723"></span></td>
</tr>
</tbody></table>
</div></li></ul>
</div>
</div>
<div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001;"></div></div>
Update:
Initialization: I've already tried using helper: 'clone', appendTo: "several different elements including body" and zIndex: 10000 but none of them helps me.
What I would like the appendTo attribute to achieve is making the li droppable inside the (visual part of) my ".Category" i.e. the div that contains the list.
$(".drpList").sortable({ handle: ".drpLink img", connectWith: ".drpList", tolerance: "pointer" });
