Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example

Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example

In this tutorial, you will know how easily you can drag and drop table rows in your application using jquery ui library with sortable method.

You can apply on a group of DOM elements to be sortable that means you can click on particular DOM elements and drag that elements to a new spot.

There are lots of useful method that you can use in your application such as you can easily make DOM element to be resizable.

  1. <html lang="en">
  2. <head>
  3. <title>Jquery Table Row Draggable and Sortable</title>
  4. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  5. <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
  8. </head>
  9. <body>
  10. <div class="container">
  11. <h2>Jquery Table Row Draggable and Sortable</h2>
  12. <table class="table">
  13. <thead>
  14. <tr>
  15. <th>No</th>
  16. <th>Course</th>
  17. <th>Details</th>
  18. </tr>
  19. </thead>
  20. <tbody>
  21. <tr>
  22. <td>1</td>
  23. <td><a href="http://www.expertphp.in/tutorials/1/php">PHP</a></td>
  24. <td>Learn online PHP course </td>
  25. </tr>
  26. <tr>
  27. <td>2</td>
  28. <td><a href="http://www.expertphp.in/tutorials/5/css">CSS</a></td>
  29. <td>Learn online CSS course</td>
  30. </tr>
  31. <tr>
  32. <td>3</td>
  33. <td><a href="http://www.expertphp.in/tutorials/6/javascript">JS</a></td>
  34. <td>Learn online JS course</td>
  35. </tr>
  36. <tr>
  37. <td>4</td>
  38. <td><a href="http://www.expertphp.in/tutorials/12/seo">SEO</a></td>
  39. <td>Learn online SEO course</td>
  40. </tr>
  41. <tr>
  42. <td>5</td>
  43. <td><a href="http://www.expertphp.in/tutorials/2/mysql">MySQL</a></td>
  44. <td>Learn online MySQL course</td>
  45. </tr>
  46. </tbody>
  47. </table>
  48. </div>    
  49. <script type="text/javascript">
  50. $('tbody').sortable();
  51. </script>
  52. </body>
  53. </html>

Phone: (+91) 8800417876
Noida, 201301
sakarya escort sakarya escort bayan sakarya escort serdivan escort sakarya escort sakarya escort serdivan escort
karasu escort akyazı escort serdivan escort akyazı escort ferizli escort sapanca escort serdivan escort söğütlü escort sakarya escort izmit escort arifiye escort erenler escort hendek escort kocaali escort pamukova escort taraklı escort geyve escort