How to move an item to an empty list using jquery?

If you understand the question then you might know it's related to jquery-ui sortable function which though successfully helped to move items between list but fail to add item in a list when it gets empty.

It was earlier reported as a bug and solution to this one was to add width and height to your list.
http://bugs.jqueryui.com/ticket/2940

<ul id="sortable1" class="connectedSortable">
 <li class="ui-state-default">Item 1</li>
 <li class="ui-state-default">Item 2</li>
 <li class="ui-state-default">Item 3</li>
 <li class="ui-state-default">Item 4</li>
 <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
 <li class="ui-state-highlight">Item 1</li>
 <li class="ui-state-highlight">Item 2</li>
 <li class="ui-state-highlight">Item 3</li>
 <li class="ui-state-highlight">Item 4</li>
 <li class="ui-state-highlight">Item 5</li>
</ul>

First task: Make them sortable among them.

 <script>
 $(function() {
  $( "#sortable1, #sortable2" ).sortable({
   connectWith: ".connectedSortable"
  }).disableSelection();
 });
 </script>

Second task: Add element to empty list


bingooo .You can't.

Solution:

Add height to your UL /OL list. I gave it by adding padding to it.

.connectedSortable{
   padding-bottom: 10px;
}