Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example

Posted 7 years ago By Ajay Gupta 89721

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.

<html lang="en">
<head>
    <title>Jquery Table Row Draggable and Sortable</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
    
</head>
<body>
<div class="container">
     <h2>Jquery Table Row Draggable and Sortable</h2>
     <table class="table">
        <thead>
            <tr>
                <th>No</th>
                <th>Course</th>
                <th>Details</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>1</td>
              <td><a href="http://www.expertphp.in/tutorials/1/php">PHP</a></td>
              <td>Learn online PHP course </td>
            </tr>
            <tr>
              <td>2</td>
              <td><a href="http://www.expertphp.in/tutorials/5/css">CSS</a></td>
              <td>Learn online CSS course</td>
            </tr>
            <tr>
              <td>3</td>
              <td><a href="http://www.expertphp.in/tutorials/6/javascript">JS</a></td>
              <td>Learn online JS course</td>
            </tr>
            <tr>
              <td>4</td>
              <td><a href="http://www.expertphp.in/tutorials/12/seo">SEO</a></td>
              <td>Learn online SEO course</td>
            </tr>
            <tr>
              <td>5</td>
              <td><a href="http://www.expertphp.in/tutorials/2/mysql">MySQL</a></td>
              <td>Learn online MySQL course</td>
            </tr>
        </tbody>
    </table>
</div>    
<script type="text/javascript">
  $('tbody').sortable();
</script>
</body>
</html>

<html lang="en">
<head>
    <title>Jquery Table Row Draggable and Sortable</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
    
</head>
<body>
<div class="container">
     <h2>Jquery Table Row Draggable and Sortable</h2>
     <table class="table">
        <thead>
            <tr>
                <th>No</th>
                <th>Course</th>
                <th>Details</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>1</td>
              <td><a href="http://www.expertphp.in/tutorials/1/php">PHP</a></td>
              <td>Learn online PHP course </td>
            </tr>
            <tr>
              <td>2</td>
              <td><a href="http://www.expertphp.in/tutorials/5/css">CSS</a></td>
              <td>Learn online CSS course</td>
            </tr>
            <tr>
              <td>3</td>
              <td><a href="http://www.expertphp.in/tutorials/6/javascript">JS</a></td>
              <td>Learn online JS course</td>
            </tr>
            <tr>
              <td>4</td>
              <td><a href="http://www.expertphp.in/tutorials/12/seo">SEO</a></td>
              <td>Learn online SEO course</td>
            </tr>
            <tr>
              <td>5</td>
              <td><a href="http://www.expertphp.in/tutorials/2/mysql">MySQL</a></td>
              <td>Learn online MySQL course</td>
            </tr>
        </tbody>
    </table>
</div>	
<script type="text/javascript">
  $('tbody').sortable();
</script>
</body>
</html>

You can use this example when you need to easily drag and drop table row in your application when you drag this to a new spot then other row will be automatically adjust.

Show Demo

Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example

Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example

Tags :

Related Posts

How to validate form in jQuery using jQuery Form Validator

Powerful jQuery Bootstrap Form Validation with Example

jQuery Select box search option with Chosen and Bootstrap Plugins example

Validate multiple email addresses in single input text example

How to create divided multi-scrolling pages using jQuery Plugins

jQuery How To Fix the “$ is not a function” Error Using noConflict

Add Remove input fields dynamically using jQuery

Auto Load More Data on Page Scroll with jQuery and PHP Laravel

jQuery making custom right-click context menu example

jQuery - disable context menu right click, cut, copy and paste

jQuery remove query string parameter from url

Check and Uncheck all checkbox using jQuery Example

How to hide, show, or toggle your div with jQuery

How to select only one checkbox at a time in jquery example

How to get current url with or without query string example jQuery

Submit PHP Bootstrap Form without Page Refresh using jQuery, Ajax

Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP

How to add or update query string parameter to current url in Javascript

Bootstrap datepicker example text input with specifying date format

jQuery - set am/pm format using jQuery timepicker Plugin with example

Bootstrap year picker example using datepicker js plugin

How to get client ip address in javascript of jquery?

How to count number of characters limit in textarea Javascript

jQuery Fullcalendar Integration with example

Loading Gravatar image from email using JQuery

Laravel 5 - Autocomplete Mutiple Fields Using jQuery, Ajax and MySQL

Ajax Image Upload using PHP and jQuery Example Without Page Refresh with Validation

How to get local time from UTC using Moment.JS with example