How to use ui sortable in AngularJS
Posted By : Monu Thakur | 06-Jan-2017
ui-sortable is use for making list custom sortable for that ui-sortable provides draggable functionality through which we can just drag one item form one place or index and drop to another place or index
Let's demonstrate a simple example of ui-sortable
First we create html
ui.sortable connected lists event order
{{$index}} {{app.title}}{{$index}} {{app.title}}
- {{entry}}
In this html we have all these Js libs
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.jsAfter that we create a angular app and controller
var myapp = angular.module('sortableApp', ['ui.sortable']); myapp.controller('sortableController', function ($scope) { var tmpList = []; $scope.rawScreens = [ [{ title: 'A1 (A)' }, { title: 'B1 (B)' }, { title: 'C1 (C)' }], [{ title: 'A2 (A)' }, { title: 'B2 (B)' }, { title: 'C2 (C)' }] ]; $scope.sortingLog = []; function createOptions (listName) { var _listName = listName; var options = { placeholder: "app", connectWith: ".apps-container", activate: function() { console.log("list " + _listName + ": activate"); }, beforeStop: function() { console.log("list " + _listName + ": beforeStop"); }, change: function() { console.log("list " + _listName + ": change"); }, deactivate: function() { console.log("list " + _listName + ": deactivate"); }, out: function() { console.log("list " + _listName + ": out"); }, over: function() { console.log("list " + _listName + ": over"); }, remove: function() { console.log("list " + _listName + ": remove"); }, sort: function() { console.log("list " + _listName + ": sort"); }, start: function() { console.log("list " + _listName + ": start"); }, stop: function() { console.log("list " + _listName + ": stop"); }, update: function() { console.log("list " + _listName + ": update"); } }; return options; } $scope.sortableOptionsList = [createOptions('A'), createOptions('B')]; $scope.logModels = function () { $scope.sortingLog = []; for (var i = 0; i < $scope.rawScreens.length; i++) { var logEntry = $scope.rawScreens[i].map(function (x) { return x.title; }).join(', '); logEntry = 'container ' + (i+1) + ': ' + logEntry; $scope.sortingLog.push(logEntry); } }; });
In this controller we inject ui-sortable In this example we have two drag and drop area with to different list of data. We add a createOptions function for drag and drop functionality
Add this two impotant properties in this function
placeholder: "app", connectWith: ".apps-container",
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Monu Thakur
Monu is an experienced Frontend Developer, having good knowledge of Photoshop, illustrator, HTML5, CSS3, Less, Sass, Javascript, Jquery, Angular 4, Angular 4 theme integration.