角度标签 - 可排序/可移动 [英] Angular tabs - sortable/moveable

问题描述

是否有任何允许重新排序它们的 Angular JS 选项卡指令(如浏览器的选项卡)

Are there any Angular JS Tabs directives that allow to reorder them (like a browser's tabs)

如果不是开始实施会很棒

If not a starting implementation would be great

使用angular-ui-bootstap

<tabset> 
    <tab ng-repeat="tab in vm.tabs" active="tab.active" sortable-tab> </tab> 
    <tab disabled="true" ng-click"vm.addNewTab()" class="nonSortable-addTab-plusButton"></tab> 
</tabset>

如何使它们可重新排序?

How to make them reorderable?

添加了赏金以使用上面的原始标签集语法.

Bounty added to use original tabset syntax above.

推荐答案

使用 Angular UI Bootstrap tabset，只需一个 sortable-tab 指令:

Using the Angular UI Bootstrap tabset, with just a sortable-tab directive:

<tabset>
  <tab sortable-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
    <p>{{tab.content}}</p>
  </tab>
  <tab disabled="true">
    <tab-heading>
      <i class="glyphicon glyphicon-plus"></i>
    </tab-heading>
  </tab>
</tabset>

首先，它需要一些技巧/技巧才能与 ngRepeat 集成，以便它可以重新排列数组.它(重新)解析 ng-repeat 属性，并从作用域中获取数组，就像 ngRepeat 所做的

First of all it needed a bit of a trick/hack to integrate with ngRepeat, so it can then re-order the array. It (re)parses the ng-repeat attribute, and fetching the array from the scope, just like ngRepeat does

// Attempt to integrate with ngRepeat
// https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js#L211
var match = attrs.ngRepeat.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/);
var tabs;
scope.$watch(match[2], function(newTabs) {
  tabs = newTabs;
});

然后您还可以在作用域上观察 $index 变量，以确保您始终拥有当前元素的最新索引:

You can then also watch the $index variable on the scope, to make sure you alway have the latest index of the current element:

var index = scope.$index;
scope.$watch('$index', function(newIndex) {
  index = newIndex;
});

然后使用HTML5拖放，将元素的索引作为其数据通过setData 和 getData

And then use HTML5 drag and drop, passing the index of the element as its data via setData and getData

attrs.$set('draggable', true);

// Wrapped in $apply so Angular reacts to changes
var wrappedListeners = {
  // On item being dragged
  dragstart: function(e) {
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.dropEffect = 'move';
    e.dataTransfer.setData('application/json', index);
    element.addClass('dragging');
  },
  dragend: function(e) {
    e.stopPropagation();
    element.removeClass('dragging');
  },

  dragleave: function(e) {
    element.removeClass('hover');
  },
  drop: function(e) {
    e.preventDefault();
    e.stopPropagation();
    var sourceIndex = e.dataTransfer.getData('application/json');
    move(sourceIndex, index);
    element.removeClass('hover');
  }
};

// For performance purposes, do not
// call $apply for these
var unwrappedListeners = {
  dragover: function(e) {
    e.preventDefault();
    element.addClass('hover');
  },
  /* Use .hover instead of :hover. :hover doesn't play well with 
     moving DOM from under mouse when hovered */
  mouseenter: function() {
    element.addClass('hover');
  },
  mouseleave: function() {
    element.removeClass('hover');
  }
};

angular.forEach(wrappedListeners, function(listener, event) {
  element.on(event, wrap(listener));
});

angular.forEach(unwrappedListeners, function(listener, event) {
  element.on(event, listener);
});

function wrap(fn) {
  return function(e) {
    scope.$apply(function() {
      fn(e);
    });
  };
}

注意:对于某些悬停效果，使用 hover 类而不是 :hover 有一些技巧.这部分是由于 CSS :hover 样式在元素从鼠标下方重新排列后未被删除，至少在 Chrome 中是这样.

Note: there is a bit of a hack regarding using a hover class, instead of :hover for some of the hover effects. This is partially due to CSS :hover styles not being removed on elements after they were re-arranged from out of under the mouse, at least in Chrome.

实际移动选项卡的函数，获取ngRepeat 使用的数组，并对其重新排序:

The function to actually move the tabs, takes the array that ngRepeat uses, and re-orders it:

function move(fromIndex, toIndex) {
  // http://stackoverflow.com/a/7180095/1319998
  tabs.splice(toIndex, 0, tabs.splice(fromIndex, 1)[0]);
};

您可以在 Plunker 中查看所有这些

这篇关于角度标签 - 可排序/可移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！