Webucator Blog

Drag-and-Drop Sortable with AngularJS and angular-ui-sortable

Setting up a drag-and-drop sortable list when using AngularJS is not a feature that comes packaged in the framework out of the box. To do this we will need to use one of the directives of AngularUI, a companion suite to the AngularJS framework. The component we will use is the angular-ui-sortable which is the jQuery UI sortable feature for Angular.

For this tutorial we will use the following libraries:

  • Bootstrap 3.x
  • AngularJS 1.5.x +
  • AngularUI Sortable
  • jQuery UI (required by AngularUI Sortable)

First, we need to set up our Angular application. Let’s start by creating a basic HTML template to host our app. We will use the ng-app and ng-controller directives to link up the body tag to our Angular application. At the bottom we will include our required libraries via CDN scripts that include all the JS dependencies needed to run our application, and at the top, a CDN link to the Bootstrap 3 stylesheet CSS.

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>My App</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
</head>
<body ng-app="myApp" ng-controller="myController">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.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://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.15.0/sortable.min.js"></script>
 <script src="app.js"></script>
</body>
</html>

Next, we need to create our application JS file to store our controller. For this tutorial we will call it app.js.

var myapp = angular.module('myApp', ['ui.sortable']);

In this code we define an Angular module and name it myApp, and include the ui.sortable in the requires parameter. This ui.sortable is what wires up angular-ui-sortable to our module. We also define the controller called myController for our module and inject the Angular $scope object. This is where we will set up our Angular sortable, but first let’s create a test array stored in $scope called people.

myapp.controller('myController', ['$scope', function($scope) {
 // people array
 $scope.people = ["John","Fred","Teddy","Deloris","Brian"];
}]);

Now let’s add a Bootstrap list and wire it up to our people array stored in $scope by adding the ng-model directive on the ul and the ng-repeat method to loop over our array and create the list elements. To make this list sortable, all we need to do is use the ui-sortable directive.

<div class="container">
  <h2>People</h2>
  <ul ui-sortable="sortableOptions" ng-model="people" class="list-group">
    <li ng-repeat="person in people" class="list-group-item">{{person}}</li>
  </ul>
</div>

After the list is sorted, the order of the array in $scope is updated. To see this in action let’s add a pre element and bind it to the people array that will show the order of array in real time.

<pre>{{people}}</pre>

screen-shot-2016-10-18-at-12-45-10-pm

Hopefully you can see how easy Angular and angular-ui-sortable make creating sortable elements. There is a good chance we need to do something after we sort the list. What we need to do is configure the angular-ui-sortable options. For this tutorial we will set up the stop option but leave it empty (this is where you would perform functionality to update list in a database, etc.). To explore all the options, be sure to check out the documentation for angular-ui-sortable.

// set up sortable options
$scope.sortableOptions = {
 stop: function(e, ui) {
   // do something here
 }
};

Be sure to check out Webucator’s AngularJS training opportunities to learn more about how to create and develop with AngularJS.

index.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>My App</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
</head>
<body ng-app="myApp" ng-controller="myController">

 <div class="container">
  <h2>People</h2>
   <ul ui-sortable="sortableOptions" class="list-group">
    <li ng-repeat="person in people" class="list-group-item">{{person}}</li>
   </ul>
   <pre>{{people}}</pre>
 </div>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.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://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.15.0/sortable.min.js"></script>
 <script src="app.js"></script>
</body>
</html>

app.js

var myapp = angular.module('myApp', ['ui.sortable']);

myapp.controller('myController', ['$scope', function($scope) {

 // people array
 $scope.people = ["John","Fred","Teddy","Deloris","Brian"];

 // set up sortable options
 $scope.sortableOptions = {
   stop: function(e, ui) {
     // do something here
   }
 };
}]);