Saturday, April 4, 2015

Drag & Drop Table row

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>submit demo</title>
<script src="min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="ckeditor/adapters/jquery.js"></script>

 <style>
 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;
}
 </style>
 <script>
 $(document).ready(function() {
    /* $("#table-draggable1 tbody tr").draggable({
            appendTo:"body",
            helper:"clone"
        });*/
    $('#table-draggable1 tbody').sortable({
    stop : function() {
        console.log('fdds');
        },
    });
});
 </script>
</head>
<body>
 <table id='table-draggable1'>  
  <tbody class="connectedSortable">  
   <tr>
    <th>col1</th>
    <th>col2</th>  
    <th>col3</th>  
    <th>col4</th>  
   </tr>
   <tr>   
    <td>1</td>                 
    <td >668</td>
    <td>100.95</td>  
    <td>1.82</td>
   </tr>  
   <tr>  
    <td>2</td>                
    <td>668</td>
    <td>100.95</td>
    <td>1.82</td>
   </tr>
   <tr>   
    <td>3</td>                 
    <td>668</td>
    <td>100.95</td>  
    <td>1.82</td>
   </tr>  
   <tr>  
    <td>4</td>                
    <td>668</td>
    <td>100.95</td>
    <td>1.82</td>
   </tr>  
   <tr>   
    <td>6</td>                 
    <td>668</td>
    <td>100.95</td>  
    <td>1.82</td>
   </tr>  
   <tr>  
    <td>7</td>                
    <td>668</td>
    <td>100.95</td>
    <td>1.82</td>
   </tr>                      
  </tbody>
</table>
<table id='table-draggable2'>  
  <tbody class="connectedSortable1">  
   <tr>
    <th>col1</th>
    <th>col2</th>  
    <th>col3</th>  
    <th>col4</th>  
   </tr>
   <tr>   
    <td>1</td>                 
    <td>668</td>
    <td>100.95</td>  
    <td>1.82</td>
   </tr>  
   <tr>  
    <td>2</td>                
    <td>668</td>
    <td>100.95</td>
    <td>1.82</td>
   </tr>
   <tr>   
    <td>3</td>                 
    <td>668</td>
    <td>100.95</td>  
    <td>1.82</td>
   </tr>  
   <tr>  
    <td>4</td>                
    <td>668</td>
    <td>100.95</td>
    <td>1.82</td>
   </tr>  
   <tr>   
    <td>6</td>                 
    <td>668</td>
    <td>100.95</td>  
    <td>1.82</td>
   </tr>  
   <tr>  
    <td>7</td>                
    <td>668</td>
    <td>100.95</td>
    <td>1.82</td>
   </tr>                      
        </tbody>
    </table>
</body>
</html>

No comments:

Post a Comment