Jquery Drag and Drop

Jquery Drag and Drop

by Reddy Uppathi

HTML

<table id='table-draggable1'>  
                <tbody class="hi">  
                    <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>

CSS

.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;
}
.reddy{
  background:red;
}

JavaScript

$(document).ready(function() {

    var $tabs=$('#table-draggable1')
    $( "tbody.hi" )
        .sortable({
            connectWith: ".hi",
            items: "> tr:not(:first)",
            appendTo: $tabs,
            //helper:"clone",
            zIndex: 999990
        })
        .disableSelection()
    ;
    
    var $tab_items = $($tabs).droppable({
      accept: ".hi tr",
      hoverClass: "reddy",
      drop: function( event, ui ) {
        return false;
      }
    });
    
});