Trie d'une liste en drag and drop ================================= ![category](web) ![tag](javascript) ![tag](angularjs) L'objectif est d'avoir une liste qu'on peut trier avec la souris (ou le doigt). Pour cela nous allons utiliser angularjs, ngMaterial et le module angular-sortable-view ```bash bower install angular bower install angular-material bower install angular-fontawesome bower install angular-sortable-view ``` Notre liste avant tri --------------------- Vous pouvez retrouver sur le lien http://fraoustin.aliasdns.org/blog/201510270926/ un exemple de code permettant juste afficher une liste. fichier index.html ```html Test

{{ item.name }}

{{ item.age }}

``` fichier app.js ```javascript var module = angular.module("MyAppli", ['picardy.fontawesome', 'ngMaterial' ]); // add theme module.config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('green') .accentPalette('orange') .warnPalette('red'); }); // add controler module.controller('AppController', function($scope) { $scope.getInit = function() { $scope.employees = [{ name: 'John', age: 25, gender: 'boy' }, { name: 'Jessie', age: 30, gender: 'girl' }, { name: 'Johanna', age: 28, gender: 'girl' }, { name: 'Joy', age: 15, gender: 'girl' }, { name: 'Mary', age: 28, gender: 'girl' }, { name: 'Peter', age: 95, gender: 'boy' }, { name: 'Sebastian', age: 50, gender: 'boy' }, { name: 'Erika', age: 27, gender: 'girl' }, { name: 'Patrick', age: 40, gender: 'boy' }, { name: 'Samantha', age: 60, gender: 'girl' }]; }; // init data $scope.getInit(); }); ``` Intégration du tri ------------------ fichier index.html ```html Test

{{ item.name }}

{{ item.age }}

``` Les principaux changement: - ajout du fichier angular-sortable-view.min.js - balise md-list : - ajout de sv-root - ajout sv-part: l'item qu'on déplace - ajout de la fonction lancé après le tri (sv-on-stop) - balise md-list-item: ajout de sv-element indiquant que cet élement sera déplacé fichier app.js ```javascript var module = angular.module("MyAppli", ['picardy.fontawesome', 'ngMaterial', 'angular-sortable-view' ]); // add theme module.config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('green') .accentPalette('orange') .warnPalette('red'); }); // add controler module.controller('AppController', function($scope) { $scope.getInit = function() { $scope.employees = [{ name: 'John', age: 25, gender: 'boy' }, { name: 'Jessie', age: 30, gender: 'girl' }, { name: 'Johanna', age: 28, gender: 'girl' }, { name: 'Joy', age: 15, gender: 'girl' }, { name: 'Mary', age: 28, gender: 'girl' }, { name: 'Peter', age: 95, gender: 'boy' }, { name: 'Sebastian', age: 50, gender: 'boy' }, { name: 'Erika', age: 27, gender: 'girl' }, { name: 'Patrick', age: 40, gender: 'boy' }, { name: 'Samantha', age: 60, gender: 'girl' }]; }; $scope.change = function($item, $part, $index){ console.log($item.name); console.log("new order"); var res = ""; for (var i = 0; i < $scope.employees.length; i++) { res = res + $scope.employees[i].name + "," }; console.log(res); } // init data $scope.getInit(); }); ``` Les principaux changements - ajout du module angular-sortable-view pour notre application - ajout de la fonction change (appelée après chaque modification)