読者です 読者をやめる 読者になる 読者になる

Debuginfo

思考とアウトプット

AngularJS+Slip.jsでタッチデバイスでリストの順番を並べるUIを作成する 

f:id:shoheik:20141017122239p:plain

上記のようにリストを動的にスマホで動かせるようにするために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);
        });

      }
    };
  }

})();