AngularJS Drag and Drop Table Rows Example with Demo

By Hardik Savani October 20, 2023 Category : Javascript Bootstrap jQuery Angular

Hi Artisan,

After a long time, I write an example of angularjs. in this example, I will share with you how to create a simple drag and drop table rows, div, list etc using angularjs ui-sortable directives. we will use jquery.ui for drag and drop table rows.

We may sometime require to create drag and drop table column for sorting data. If you need to do this then you have to follow jquery UI for sortable. but if you are work on angularjs then how you will do? Angularjs have many plugins for sortable but if you use core jquery UI then it would be great to customize and everything.

So, here I give you very simple and basic example of drag and drop table rows. You can just copy code and check it your own because I use CDN for all JS and CSS. You can also see a demo for drag and drop. I added a link below for a demo.

Preview:

index.html

Read Also: PHP AngularJS Add Remove Input Fields Dynamically Example
<!DOCTYPE html>
<html>
<head>
    <title>Angularjs Drag and Drop Table Rows Example - ItSolutionStuff.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    <script src="http://cdn.jsdelivr.net/g/jquery@1,jquery.ui@1.10%28jquery.ui.core.min.js+jquery.ui.widget.min.js+jquery.ui.mouse.min.js+jquery.ui.sortable.min.js%29,angularjs@1.2,angular.ui-sortable"></script>
</head>
<body>

<div class="container">
    <div ng-app="myApp" ng-controller="mainController" data-ng-init="init()">
        <h2>Angularjs Drag and Drop Table Rows Example - ItSolutionStuff.com</h2>
        <table class="table table-bordered">
            <tr>
                <th>Website List</th>
            </tr>
            <tbody ui-sortable ng-model="items">
            <tr ng-repeat="item in items">
                <td>{{ item }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    var myApp = angular.module("myApp", ['ui.sortable']);        

    myApp.controller("mainController", function($scope) {
      $scope.items = ["ItSolutionStuff.com", "Demo.ItSolutionStuff.com", "HDTuto.com", "NiceSnippets.com"];

      $scope.sortableOptions = {
        update: function(e, ui) { 
            console.log(e);
        },
        axis: 'x'
      };
    });
</script>

</body>
</html>

You can also check demo from bellow link.

I hope you found your best....

Tags :
Previous

Laravel Like Dislike System Tutorial Example
Next

How to Remove All Spaces from String in JQuery?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares