AngularJS Drag and Drop Table Rows Example with Demo

By Hardik Savani | June 6, 2018 | | 12878 Viewer | Category : Javascript Bootstrap jQuery AngularJS


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

<!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....




***Do you want me hire for your Project Work? Then Contact US.


We are Recommending you: