角选项卡 - 可排序/可移动 [英] Angular tabs - sortable/moveable
问题描述
是否有任何角度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
<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>
如何使他们reorderable？
How to make them reorderable?
编辑：赏金加入到使用上面原始的标签集语法
Bounty added to use original tabset syntax above.
推荐答案
使用角UI引导标签集，只用排序选项卡指令：
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-重复属性，并取出由范围阵列，就像 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;
});
您可以随后还观看了 $指数变量的范围，以确保你同拥有当前元素的最新指数：
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);
});
};
}
请注意：有一点使用悬停类关于一个黑客，而不是：对于一些悬停的悬停效果。这部分是由于CSS ：悬停的风格不被上的元素移除了鼠标下的他们被重新排列后，至少在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屋！
