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
Attention Required! | Cloudflare

Sorry, you have been blocked

You are unable to access ressim.net

Why have I been blocked?

This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.

What can I do to resolve this?

You can email the site owner to let them know you were blocked. Please include what you were doing when this page came up and the Cloudflare Ray ID found at the bottom of this page.