如何使用可排序的 jquery ui 对使用材料设计创建的角度选项卡进行排序？

Question

我试图创建一种使用 jquery ui sortable 对angular material tabs 进行排序（或排列）的方法。我尝试使用ui.sortable，但它不适用于md-tabs，因为我收到一个错误multiple directives trying to create an isolated scope。

无论如何，所以我已经能够使用 jquery ui sortable 成功地对选项卡进行排序/排列。在这里分享它以防其他人将来需要它（因为在 SO 或任何其他网站上都有 0 个结果）。

Answer 1

我已经能够使用 jquery ui sortable 成功地对标签进行排序/排列。如果您有任何建议或改进，也请随时分享！

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>