Wie eckige Registerkarten, die mit Material Design erstellt wurden, mit jquery ui sortierbar sortiert werden?

Question

Ich habe versucht, eine Möglichkeit zu erstellen (oder zu arrangieren) angular material tabs mit jQuery ui sortierbar erstellen. Ich habe versucht mit ui.sortable, aber es funktioniert nicht mit md-tabs, weil ich einen Fehler mehrere Direktiven versuchen, einen isolieren Bereich zu erstellen.

Wie auch immer, so konnte ich die Tabs erfolgreich mit jquery ui sortierbar sortieren/arrangieren. Teilen Sie es hier für den Fall, dass jemand anderes es in der Zukunft braucht (weil genau dort 0 Ergebnisse für SO oder eine andere Seite sind).

Answer 1

Ich war in der Lage, die Registerkarten erfolgreich mit jquery ui sortierbar zu sortieren/anzuordnen. Wenn Sie Vorschläge oder Verbesserungen haben, zögern Sie nicht, es auch zu teilen!

angular.module('myApp', ['ngMaterial', 'ngMessages']) 
 
    .controller('myController', function($scope, $timeout) { 
 
    $scope.items = ['Item #1', 'Item #2', 'Item #3', 'Item #4', 'Item #5'] 
 
    $scope.sort = function() { 
 
     var tabs = $("#sortable").sortable({ 
 
     "items": "md-tab-item", 
 
     "axis": "x", 
 
     "start": function(event, ui) { 
 
      ui.item.startPos = ui.item.index(); 
 
     }, 
 
     "stop": function(event, ui) { 
 
      var oldIndex = ui.item.startPos; 
 
      var newIndex = ui.item.index(); 
 
      var backward = oldIndex > newIndex; 
 

 
      $scope.items.splice(newIndex + (backward ? 0 : 1), 0, $scope.items[oldIndex]); 
 
      $scope.items.splice(oldIndex + (backward ? 1 : 0), 1); 
 

 
      $timeout(); 
 
     } 
 
     }); 
 
    } 
 
    });

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 
 

 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 
 

 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 

 
<div ng-app="myApp" ng-controller="myController"> 
 
    <md-content> 
 
    <md-tabs md-dynamic-height md-border-bottom ng-init="sort()" id="sortable"> 
 
     <md-tab label="Tab: {{$index+1}}" ng-repeat="item in items"> 
 
     <md-content class="md-padding"> 
 
      {{item}} 
 
     </md-content> 
 
     </md-tab> 
 
    </md-tabs> 
 
    </md-content> 
 
</div>