<!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>
Saturday, April 4, 2015
Drag & Drop Table row
Labels:
Jquery
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment