Angular ng-sortable - Basic example of how it works
SITUATION:
Hello guys! In my app i have a sort of kanban: there are some columns, each containing a list of items.
I need to drag and drop items among columns and reorder them inside the same column.
I have tried before three angular modules related with drag and drop (first two) and reordering (third):
ngDraggable: https://github.com/fatlinesofcode/ngDraggable
Angular dragdrop: https://github.com/codef0rmer/angular-dragdrop
Angular ui-sortable: https://github.com/angular-ui/ui-sortable
They are nice, with good documentation, but it seems not possible to drag and drop and reorder at the same time. Then i found another module:
ng-sortable: https://github.com/a5hik/ng-sortable
It seems to be exactly what i need. But the documentation is not so clear. I am not able to understand how to set it up.
QUESTION:
Can you show me please how to set it up? There is a plunker with a good and clear example?
Thank you!
Answer
Minimal ng-sortable Setup (No need for bower. Bower is confusion for semis like me, too.).
This is the minimum setup to get a full sortable Array with ng-sortable, that worked for me.
Load necessary Javascripts
Load angular.js
Load ng-sortable.js (Find this in dist folder in downloaded .zip file https://github.com/a5hik/ng-sortable)
- Load your app.js
Load the as.sortable into your app
var app = angular.module('app', ['ngRoute', 'as.sortable']);Load your AppController.js
Load necessary Stylesheets
(Find both in dist folder in downloaded .zip file https://github.com/a5hik/ng-sortable)
- Load ng-sortable.css
Load ng-sortable.style.css
Create ul with necessary attributes (
data-as-sortable data-ng-model="sortableList")Add
data-as-sortable-itemto liInsert div with
data-as-sortable-item-handleinto li
<!DOCTYPE html>
<html>
<head>
<title>NG-Sortable</title>
<script type="text/javascript" src="js/angular/angular.js"></script>
<script type="text/javascript" src="js/sortable/ng-sortable.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/AppController.js"></script>
<link rel="stylesheet" type="text/css" href="css/ng-sortable.css">
<link rel="stylesheet" type="text/css" href="css/ng-sortable.style.css">
</head>
<body ng-app="app" ng-controller="AppController">
<ul data-as-sortable data-ng-model="sortableList">
<li ng-repeat="item in sortableList" data-as-sortable-item>
<div data-as-sortable-item-handle>
index: {{$index}} | id: {{item.id}} | title: {{item.title}}
</div>
</li>
</ul>
</body>
</html>
// app.js (Your file)
var app = angular.module('app', ['ngRoute', 'as.sortable']);
// AppController.js (Your file)
app.controller('AppController', [
'$scope',
function ( $scope) {
$scope.sortableList = [
{
id : "id-000",
title : "item 000"
},
{
id : "id-001",
title : "item 001"
},
{
id : "id-002",
title : "item 002"
}
];
}
]);