如何對使用jquery ui排序的材料設計創建的角度標籤進行排序？

Question

我試圖創建一個方法來排序（或排列）angular material tabs使用jQuery UI可排序。我嘗試使用ui.sortable，但它不適用於md-tabs，因爲我得到一個錯誤多個指令試圖創建一個隔離範圍。

無論如何，所以我已經能夠使用jquery ui sortable成功排序/排列標籤。以防萬一有人在將來需要它（因爲在SO或任何其他站點有0個結果）。

Answer 1

我已經能夠使用jQuery UI排序成功排序/排列標籤。如果您有建議或改進，請隨時分享！

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>