Search code examples
jquerydraggable

jquery draggable into empty list

I am using this example from jquery ui: http://jsbin.com/odiqi3

I have deliberately made sortable list empty in the example below because I want to start dropping into an empty list:

http://jsbin.com/odiqi3/163

Is there a way to do this?

$("#sortable1").sortable({
 revert: true
});
$("#draggable").draggable({
  connectToSortable: '#sortable1',
  helper: 'clone',
  revert: 'invalid'
});
$("ul, li").disableSelection();
Solution

  • The reason you can't drag into an empty list is because it has a height of 0 (since there are no list items in it). So if you specify a height in the CSS, like so:

    #sortable1 {
    height: 100px;
}

    Then you can drag into the empty list. Here's the JSBin.