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
kadıköy escort tuzla escort kurtköy escort kartal escort maltepe escort bakırköy escort ataşehir escort
En kaliteli ve Gerçek sex hikaye 'lerini okuyabilir ve kendi seks hikayelerinizi paylaşabilirsiniz.
Türkiyenin en iyi hd porno izle sitesi 7dak ile doyumsuz türk sikişleri seyredin.
şişli escort
pendik escort
izmir escort izmir escort izmir escort izmir escort denizli escort antalya escort antalya escort antalya escort izmir escort izmir escort izmir escort izmir escort izmir escort
ankara escort
çeşme escort
kurtköy escort escort pendik
Betwinner