Faites glisser l'objet dans la liste triable - AngularJS

Il n'est pas angulaire de la magie qui peut vous aider à trouver la position d'un nouveau ou élément déplacé, mais c'est facile à faire avec jQuery. J'ai créé un exemple de la jQueryUI-démo emballage sortable et déplaçable dans les directives:

http://plnkr.co/edit/aSOlqR0UwBOXgpQSFKOH?p=preview

<ul>
  <li my-draggable="#sortable" class="ui-state-highlight">Drag me down</li>
</ul>

<ul my-sortable id="sortable">
  <li class="ui-state-default" ng-repeat="item in items">{{item.name}}</li>
</ul>

Valeur de mon my-draggable est l'id correspondant à l' my-sortable-élément. mon-déplaçable est par ailleurs assez simple:

app.directive('myDraggable',function(){

  return {
    link:function(scope,el,attrs){
      el.draggable({
        connectToSortable: attrs.myDraggable,
        helper: "clone",
        revert: "invalid"
    });
    el.disableSelection();
    }
  }
})

Dans my-sortable j'écoute de la deactivate événement qui indique qu'un élément a été supprimé. from est la position de l'élément dans le tableau qui est la source de ng-repeat. ng-repeat crée un enfant à la portée de chaque élément avec un $variable d'index indiquant la position de l'élément dans le tableau. Si $index est pas défini, je sais que c'est un élément nouveau (peut-être une meilleure façon de le déterminer, mais il travaille pour cet exemple). to est la nouvelle position de l'élément. J' $émettent un " mon triés à l'événement si un élément a été déplacé ou a 'mon-créé l'événement si un nouvel élément a été ajouté.

app.directive('mySortable',function(){
  return {
    link:function(scope,el,attrs){
      el.sortable({
        revert: true
      });
      el.disableSelection();

      el.on( "sortdeactivate", function( event, ui ) { 
        var from = angular.element(ui.item).scope().$index;
        var to = el.children().index(ui.item);
        if(to>=0){
          scope.$apply(function(){
            if(from>=0){
              scope.$emit('my-sorted', {from:from,to:to});
            }else{
              scope.$emit('my-created', {to:to, name:ui.item.text()});
              ui.item.remove();
            }
          })
        }
      } );
    }
  }
})

Dans le contrôleur, j'ai créer les éléments de tableau et d'écouter les événements:

$scope.items = [
  {name:'Item 1'},
  {name:'Item 2'},
  {name:'Item 3'},
  {name:'Item 4'},
];

$scope.$on('my-sorted',function(ev,val){
  //rearrange $scope.items
  $scope.items.splice(val.to, 0, $scope.items.splice(val.from, 1)[0]);
})

$scope.$on('my-created',function(ev,val){
  //create new item at position 
  $scope.items.splice(val.to, 0,
    {name:'#'+($scope.items.length+1)+': '+val.name});
})

Comme vous pouvez le voir, lorsque vous ajoutez ou déplacez un élément de modèle dans le champ d'application est mise à jour.

Ces directives ne sont pas très général que vous pourriez avoir à faire quelques ajustements afin de les faire fonctionner avec votre application.

OriginalL'auteur joakimbl