Move item to Empty list li sortable

by mdineshkumarcs

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<ul id="groupsList" class="groupsList">  
  <li id="group1" class="group">Group 1  
    <ul id="groupItems1" class="itemsList">  
      <li id="item1-1" class="item">Item 1.1</li>  
      <li id="item1-2" class="item">Item 1.2</li>  
    </ul>  
  </li>
  <li id="group2" class="group">Group 2  
    <ul id="groupItems2" class="itemsList">  
      <li id="item2-1" class="item">Item 2.1</li>  
      <li id="item2-2" class="item">Item 2.2</li>  
    </ul>  
  </li>
  <li id="group3" class="group">Group 3  
    <ul id="groupItems3" class="itemsList">  
      <li id="item3-1" class="item">Item 3.1</li>  
      <li id="item3-2" class="item">Item 3.2</li>  
    </ul>  
  </li>
</ul>

CSS

li {
    background-color:#ffcb05;
    margin:5px;
    padding:5px;
    cursor:move;
}
div:not(.container) {
    background-color:#00274c;
    min-height: 30px;
    margin: 10px;
    padding:10px;
    width:200px;
    vertical-align:top;
    display:inline-block;
}
.group{
  min-height:50px;
  
}

JavaScript

$(function(){

 $('#groupsList').sortable();
$('.itemsList').sortable({
    connectWith: ['.group','.itemsList']
});
});