jquery-ui sortable connected lists - dropping on an empty list

Question

I'm using jQuery UI's sortable to drag elements between multiple lists. An example:

http://jsfiddle.net/M4UY4/1/

The JS:

$(function() {
$('.sortable').sortable({
    connectWith: ".sortable"
}).disableSelection();

});

There are two simple lists. When I drag all the elements from listA to listB (or vice-versa), listA is destroyed and I can't drop back items from listB to listA. Is it possible to retain a list even if all items have been dragged and dropped out of it?

Answer 1

I think it has to do with the element just not being large enough to drag on top of when the list is empty. I added css to your fiddle. Basically copied the css used on the jQuery sortable page.

 #list-A ul, #list-B ul 
 { list-style-type: none; 
   margin: 0; padding: 0; 
   float: left;   margin-right: 10px;
   background: #eee; padding: 5px; width: 143px;
 }

 .sortable li 
 { margin: 5px; padding: 5px; 
   font-size: 1.2em; 
   width: 120px; 
 }

Here is a fiddle

Answer 2

For anyone still searching for a solve of this problem in 2023:

you might have, like me, enabled the dropOnEmpty option of the Sortable plugin.

Hope this helps someone