如何对使用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>