Wie kann ich angular und UI-Sortable mit Tabellenzellen ohne umständlichen Abstand anwenden?

Question

Ich möchte eine Tabelle sortierbar nach Spalte mit Angular UI-Sortable. Wenn mehrere Zeilen in der Tabelle vorhanden sind, wird der Abstand verwechselt. Ich denke, das liegt daran, dass die gezogene Zelle und der Platzhalter Platz beanspruchen, obwohl die gezogene Zelle absolut positioniert ist.

Meine Tabelle sieht wie folgt aus:

<table> 
    <thead> 
     <tr ui-sortable="{'ui-floating': true, axis: 'x'}" ng-model="list"> 
     <th ng-repeat="item in list"> 
      {{item.text}} 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td ng-repeat="item in list"> 
      {{item.text}} 
     </td> 
     </tr> 
    </tbody> 
    </table> 

und mein Controller sieht wie folgt aus:

var myapp = angular.module('sortableApp', ['ui.sortable']); 

myapp.controller('sortableController', function($scope) { 
    var tmpList = []; 

    for (var i = 1; i <= 6; i++) { 
    tmpList.push({ 
     text: 'Item ' + i, 
     value: i 
    }); 
    } 

    $scope.list = tmpList; 
}); 

Ich habe auch eine example on codepen. Versuchen Sie, die erste Zelle zu ziehen, um den Rest der Zeile nach dem Ende der Tabelle zu verschieben.

Ich bin Angular v1.4.9 und angular-ui-sortable v0.14.0 ausgeführt.

Answer 1

Ich habe einen Workaround gefunden. Durch Hinzufügen einer leeren Zelle zu jeder Zeile und Hinzufügen von ng-show zu der ersten, erhalte ich eine Zelle, die entfernt werden soll, wenn der Platzhalter hinzugefügt wird. Das funktioniert ziemlich gut, aber die leere Zelle braucht ein wenig Platz, und es macht das HTML etwas weniger klar.

Aktualisierter Codepen hier: http://codepen.io/anon/pen/mPZBxq