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;
}
