Jquery Bootstrap Table Row Draggable Sortable And Resizable With Example

Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example

In this post we will give you information about Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example. Hear we will give you detail about Jquery Bootstrap Table Row Draggable Sortable and Resizable with ExampleAnd how to use it also give you demo for it if it is necessary.

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.onlinecode.org/tutorials/1/php">PHP</a></td>
<td>Learn online PHP course </td>
</tr>
<tr>
<td>2</td>
<td><a href="http://www.onlinecode.org/tutorials/5/css">CSS</a></td>
<td>Learn online CSS course</td>
</tr>
<tr>
<td>3</td>
<td><a href="http://www.onlinecode.org/tutorials/6/javascript">JS</a></td>
<td>Learn online JS course</td>
</tr>
<tr>
<td>4</td>
<td><a href="http://www.onlinecode.org/tutorials/12/seo">SEO</a></td>
<td>Learn online SEO course</td>
</tr>
<tr>
<td>5</td>
<td><a href="http://www.onlinecode.org/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 >
     <h2>Jquery Table Row Draggable and Sortable</h2>
     <table >
        <thead>
            <tr>
                <th>No</th>
                <th>Course</th>
                <th>Details</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>1</td>
              <td><a href="http://www.onlinecode.org/tutorials/1/php">PHP</a></td>
              <td>Learn online PHP course </td>
            </tr>
            <tr>
              <td>2</td>
              <td><a href="http://www.onlinecode.org/tutorials/5/css">CSS</a></td>
              <td>Learn online CSS course</td>
            </tr>
            <tr>
              <td>3</td>
              <td><a href="http://www.onlinecode.org/tutorials/6/javascript">JS</a></td>
              <td>Learn online JS course</td>
            </tr>
            <tr>
              <td>4</td>
              <td><a href="http://www.onlinecode.org/tutorials/12/seo">SEO</a></td>
              <td>Learn online SEO course</td>
            </tr>
            <tr>
              <td>5</td>
              <td><a href="http://www.onlinecode.org/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

Label :

jQuery

How To

CSS

Web Development

Bootstrap

JavaScript

Hope this code and post will helped you for implement Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example

Label :

Leave a Comment Cancel Reply