AngularJS+Slip.jsでタッチデバイスでリストの順番を並べるUIを作成する
上記のようにリストを動的にスマホで動かせるようにするためにSlip.jsを使いました。Directiveに定義してng-repeatのDOMに置きます。$last === true
でループが終わったところで発火するようにしています。JQueryのライブラリを使うときは、これ良く使いますね。
<li slip ng-repeat="photo in photos|orderBy:photo.ordering:reverse" > ... </li>
temp作成やscopeとserviceに突っ込んでるところは、今回の実装のためなので変更してください。 今回はphoto.orderingに順番が入っていて、これに基づきソートしてます。
(function(){ 'use strict'; angular .module('traberryApp') .directive('slip', slip); slip.$inject = ['$log', '$timeout', 'EditJourney']; function slip($log, $timeout, EditJourney){ return function(scope, element, attrs) { if (scope.$last === true){ $log.info('running slip'); var list = $(element).parent('ul').get(0); new Slip(list); // prevent swipe list.addEventListener('slip:beforeswipe', function(e) { e.preventDefault(); }, false); // instant reorder list.addEventListener('slip:beforewait', function(e){ if (e.target.className.indexOf('instant') > -1) e.preventDefault(); }, false); list.addEventListener('slip:reorder', function(e) { var spliceIndex = e.detail.spliceIndex; var originalIndex = e.detail.originalIndex; var temp = [].concat(scope.photos); // depending on what you need to change if (spliceIndex > originalIndex){ temp.splice(spliceIndex+1, 0, scope.photos[originalIndex]); temp.splice(originalIndex, 1); }else{ temp.splice(spliceIndex, 0, scope.photos[originalIndex]); temp.splice(originalIndex+1, 1); } for(var i=0; i<temp.length; i++){ temp[i].ordering = i; } // insert scope as well as service scope.photos = temp; EditJourney.setPhotos(temp); e.target.parentNode.insertBefore(e.target, e.detail.insertBefore); }); } }; } })();