I have an accordion where the contents contain a sortable. I also have a draggable that I want to be able to drag into the sortables.
When I drag a draggable into a sortable, it does nothing UNTIL I first rearrange the sortable. After I do that, I can drag onto that sortable. In order to be able to drag onto another sortable inside of the accordion, I have to rearrange that sortable.
Is this a possible bug, or am I missing something?
Here is my entire html file:
------------------------------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
$(document).ready(function() {
$("#main").accordion({
active:".ui-accordion-left",
alwaysOpen: false,
collapsible: true,
autoheight: false,
clearStyle: true
});
$('#newItems > li').draggable({
iframeFix: true,
helper:'clone',
connectToSortable:'.items',
opacity:0.50,
appendTo: 'body',
revert: 'invalid',
scroll: false,
});
$('.items').sortable({
revert: 'invalid',
scroll: false
});
});
</script>
</head>
<body>
<div id="main">
<H3><A href="#">Section 1</A></H3>
<div>
<ul class="items">
<li>Item 1</li>
<li> Item 2</li>
</ul>
</div>
<H3><A href="#">Section 2</A></H3>
<div>
<ul class="items">
<li>Item 1</li>
<li> Item 2</li>
</ul>
</div>
<H3><A href="#">Section 3</A></H3>
<div>
<ul class="items">
<li>Item 1</li>
<li> Item 2</li>
</ul>
</div>
</div>
<div>
<ul id="newItems">
<li>New Item 1</li>
<li>New Item 2</li>
<li>New Item 3</li>
</ul>
</div>
</body>
</html>