Ist es möglich, Angular UI Tags per Drag & Drop zu verschieben/sortieren/neu anzuordnen?

Question

Es scheint möglich, mit einer früheren Version von Angular UI (siehe here), aber ich versuchte mit uib-tabset und es funktioniert nicht. Irgendwelche Ideen?

funktioniert das nicht:

<uib-tabset sortable-tab> 
    <uib-tab heading="Title 1"> 
     Some text 1 
    </uib-tab> 
    <uib-tab heading="Title 2"> 
     Some text 2 
    </uib-tab> 
</uib-tabset> 

PLUNK

Answer 1

Es funktioniert immer noch. Sie müssen die Richtlinie anwenden. Die Direktive in Ihrem Beispiel ist nicht bereits in der ui eingebaut. Hier ist ein Plunker damit mit der neuen Version arbeiten.

In Ihrem HTML:

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

Sie haben die Richtlinie als auch in Ihrem Controller umfassen:

app.directive('sortableTab', function($timeout, $document) { 
    return { 
    link: function(scope, element, attrs, controller) { 
     // 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; 
     }); 

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

     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'); 
     }, 

     // On item being dragged over/dropped onto 
     dragenter: function(e) { 
     }, 
     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); 
      }); 
     }; 
     } 

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

    } 


    } 

    }); 

Diese Richtlinie auch ng-repeat für die Registerkarten verwendet die Registerkarten sind dynamisch:

 $scope.data = []; 
    $scope.data.tabs = [ 
    { title:'Dynamic Title 1', content:'Dynamic content 1', active:true}, 
    { title:'Dynamic Title 2', content:'Dynamic content 2'}, 
    { title:'Dynamic Title 3', content:'Dynamic content 3'} 
    ];