Question

我试图使用jquery ui sortable创建一种排序（或排列）angular material tabs的方法。我尝试使用ui.sortable，但它不能与md-tabs一起使用，因为我收到错误多个指令试图创建隔离范围。

无论如何，所以我已经能够使用jquery ui排序成功排序/排列选项卡。在这里分享以防其他人将来需要它（因为在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>

如何使用jquery ui sortable对使用材质设计创建的角度标签进行排序？

1 个答案: