Trouble with a sortable in a hidden div
I have the following sortable:
<div id="add-outing-form" style="display: none;">
<ul id="outingContactsBox" style="display: block;">
<li id="outingContactsLabel" class="ui-draggable">Drag and drop contacts here</li>
</ul>
</div>
I also have a draggable list in the page.
When the page loads, the div containing the sortable is hidden through display: none and the draggable is disabled.
When the user clicks the link to show the sortable div, it displays using the show() function and the draggable is enabled. All this works as expected.
If the user then tries to move an element from the draggable list into the sortable list, nothing happens. The draggable works as expected, but the sortable refuses to accept any items.
But if I move an item already in the sortable list and then try to drop a draggable into the sortable list, it will work. It's like the sortable list has to be activated by moving one of its own items.
The issue seems to be related to the div being hidden. If I change the page so the div containing the sortable starts out as display: block; everything works as it should. Only with display: none; do I have a problem.
To me this looks like a glitch in jQuery, or am I overlooking something? Either way, is there a workaround, some way I can get the expected behavior?
Here's my code to initialize the draggable and sortable:
$("#contactsList li").draggable({
helper: "clone",
connectToSortable: '#outingContactsBox',
opacity: 0.8,
disabled: true
});
$("#outingContactsBox").sortable({
placeholder: 'ui-state-highlight',
opacity: 0.8
});
And the code when the user clicks the display link:
$('#add-outing')
.click(
function()
{
if (!$('#add-outing-form').is(":visible"))
{
$('#add-outing-form').show('clip');
$("#contactsList li").draggable("option", "disabled", false);
}
}
);