AngularJS Drag and Drop Table Rows Example with Demo
In this post we will give you information about AngularJS Drag and Drop Table Rows Example with Demo. Hear we will give you detail about AngularJS Drag and Drop Table Rows Example with DemoAnd how to use it also give you demo for it if it is necessary.
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 >
<div ng-app="myApp" ng-controller="mainController" data-ng-init="init()">
<h2>Angularjs Drag and Drop Table Rows Example - ItSolutionStuff.com</h2>
<table >
<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….
Hope this code and post will helped you for implement AngularJS Drag and Drop Table Rows Example with Demo. 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