I have two sortable lists that are connected. One is simply on the page, the other is within an accordion. (I'm using the accordion as a container for the other list)
My goal is such that a user can open the accordion and pull items out of that list and onto the page.
It works - except the placeholder disappears upon leaving the accordion. I've tried helper: 'clone' and increasing the zIndex.
Here is a simplified version of the code:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$( "#inside" ).accordion({
collapsible: true,
fillSpace: true,
active: false
});
$("#ulOutsideList, #ulInsideList").sortable({
opacity: 0.7,
revert: 100,
scroll: true,
helper: 'clone',
zIndex: 50000,
connectWith: ".connectedSortable",
});
});
</script>
<div id="outside"> <!-- 1. Pick a Store -->
<ul id="ulOutsideList" class="connectedSortable">
<li>outside 1</li>
<li>outside 2</li>
<li>outside 3</li>
</ul>
</div> <!-- end 1. Pick a Store -->
<div style="clear:both"></div>
<div id="inside">
<h3>container</h3>
<ul id="ulInsideList" class="connectedSortable">
<li>inside 1</li>
<li>inside 2</li>
<li>inside 3</li>
</ul>
</div>
