如何在没有尴尬间距的情况下将Angular和UI Sortable应用于表格单元格

Question

我想要一个使用Angular UI sortable按列排序的表。当表中有多行时，间距会变得混乱。我认为这是因为拖动的单元格和占位符占用了空间，即使拖动的单元格是绝对定位的。

我的桌子是这样的：

<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>

我的控制器是这样的：

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

我还有一个关于代码笔的例子。尝试拖动第一个单元格，以查看行的其余部分下移到表的末尾。

我正在运行Angular v1.4.9和angular-ui-sortable v0.14.0。

Answer 1

我找到了一个解决方法。通过向每行添加一个空单元格，并向第一行添加ng-show，我可以在添加占位符时删除一个单元格。这工作得很好，但空单元格确实占用了一点空间，这会使html变得不那么清晰。

此处更新代码笔：http://codepen.io/anon/pen/mPZBxq