JQuery drop function is not being called

Question

I have simple drag and drop functionality from one table to another which works well in how it looks but it appears my drop method is not being called.

here is the JQuery

<script>
  $(document).ready(function() {

  var $tabs=$('#table-draggable2')
  $( "tbody.connectedSortable" )
    .sortable({
        connectWith: ".connectedSortable",
        items: "> tr:not(:first)",
        appendTo: $tabs,
        helper:"clone",
        zIndex: 999990
    })
    .disableSelection();

   var $tab_items = $( ".nav-tabs > li", $tabs ).droppable(
   {
     accept: ".connectedSortable tr",
     hoverClass: "ui-state-hover",

     drop: function( event, ui ) 
    {
       alert("here!");
       return false;
    }
   });

   });
</script> 

the css

ul li {
min-width: 200px;
}
.dragging li.ui-state-hover {
   min-width: 240px;
}
.dragging .ui-state-hover a {
   color:green !important;
   font-weight: bold;
}
th,td {
   text-align: right;
   padding: 2px 4px;
   border: 1px solid;
}
  .connectedSortable tr, .ui-sortable-helper {
  cursor: move;
}
.connectedSortable tr:first-child {
   cursor: default;
}
.ui-sortable-placeholder {
   background: yellow;
}

and the two tables just sets the ids

<table id='table-draggable1'
 ......
<table id='table-draggable2'
 .......

the drag and drop is visually working fine but i have placed an alert in drop method and it is never displayed, why is the drop method not called?

<table id='table-draggable1'>  
            <tbody class="connectedSortable">  
                <tr>
                    <th>col1</th>
                    <th>col2</th>  
                    <th>col3</th>  
                    <th>col4</th>  
                </tr>
                <tr>   
                    <td>156</td>                                                                                         
                    <td>668</td>                                                              
                    <td>100.95</td>  
                    <td>1.82</td>                                                                  
                </tr>  
                <tr>  
                    <td>256</td>                                                                                         
                    <td>668</td>                                                              
                    <td>100.95</td> 
                    <td>1.82</td>                                                                
                </tr>  
            </tbody> 
        </table>
        <table id='table-draggable2'>  
            <tbody class="connectedSortable">  
                <tr>
                    <th>COL1</th>  
                    <th>COL2</th>  
                    <th>COL3</th>  
                    <th>COL4</th>  
                </tr>
                <tr>   
                    <td>356</td>                                                                                         
                    <td>668</td>                                                              
                    <td>100.95</td>  
                    <td>1.82</td>                                                                  
                </tr>  
                <tr>  
                    <td>456</td>                                                                                         
                    <td>668</td>                                                              
                    <td>100.95</td> 
                    <td>1.82</td>                                                                
                </tr>  
            </tbody> 
        </table> 

Answer 1

If I look at your HTML this selector $( ".nav-tabs > li", $tabs) returns no elements so no droppable object is initialized.

I think the selector you are looking for is $( "#table-draggable1 tr"), see fiddle here.