我有一些表格,例如:
<table class="table table-hover table-striped" id="mytable">
<thead>
<tr>
<th>#</th>
<th>Table heading 1</th>
<th>Table heading 2</th>
<th>Table heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
然后我想制作可排序表的行标题。
$('#mytable thead tr').sortable({
axis: "x",
helper: "clone"
}).disableSelection();
问题:
当我开始使用Drag-n-Drop时,我有6 th
- s而不是4:
<tr class="ui-sortable">
<th>#</th>
<th style="
display: none;">Table heading 1</th>
<th class="ui-sortable-placeholder"
style="
visibility: hidden;"></th>
<th>Table heading 2</th>
<th>Table heading 3</th>
<th style="
display: table-cell;
width: 343px;
height: 37px;
position: absolute;
z-index: 1000;
left: 184px;"
class="ui-sortable-helper">Table heading 1</th>
</tr>
..并且所有标记开始非常不稳定且不确定:当我将th
项目拖到表格上时,我看到所有行都在跳跃。
很明显,这是因为计数th
项(不等于td
中tr
项的数量)。
如何修复?
答案 0 :(得分:1)
每次开始拖动时,都会创建两个新的th
元素。一个没有显示,所以它似乎没有任何影响。第二个是拖动它时原始元素的占位符。这个新元素的宽度没有设置,所以它自动调整到最大列的宽度,这似乎是什么导致它跳转。
为了解决这个问题,我将占位符元素的宽度更改为我们在start函数中拖动的元素的宽度。希望这有帮助
start: function(event, ui){
$(".ui-sortable-placeholder").css({width: $(ui.item).width()});
以下是代码,这是我的fiddle
$(function () {
$('#mytable thead tr').sortable({
axis: "x",
helper: "clone",
start: function(event, ui){
$(".ui-sortable-placeholder").css({width: $(ui.item).width()});
}
}).disableSelection();
});