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 sakarya escort sakarya escort serdivan escort izmir escort eporner
akyazı escort sakarya escort ferizli escort sakarya escort geyve escort sakarya escort hendek escort sakarya escort karasu escort sakarya escort sapanca escort serdivan escort webmaster forum ankara travesti