在拖动时面临两个问题。
桌子,当我有一个隐藏的td
时,它在自我缩小。
拖动的tr单元格(td
)正在缩小
这是可排序的代码:
$('tbody').sortable({
items: ">tr",
appendTo: "parent",
opacity: 1,
containment: "document",
placeholder: "placeholder-style",
cursor: "move",
delay: 150,
});
jsfiddle link
最佳答案
缩小表的问题是因为您有一个隐藏的单元格(并且sortable
为您创建的占位符中有5个单元格,而其中没有一个是隐藏的。
您可以通过在拖动开始后将td
内的第二个placeholder
设置为隐藏来解决此问题:
$(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')
第二个问题是由于您拖动的tr更改为
position: absolute
而不再具有表的属性所致。您可以通过在该行上设置display: table
来解决此问题:ui.helper.css('display', 'table')
排序完成后,必须撤消此更改。
这是完整的更改:
start: function(event, ui) {
$(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')
ui.helper.css('display', 'table')
},
stop: function(event, ui) {
ui.item.css('display', '')
}
这是一个有效的例子
$('tbody').sortable({
items: ">tr",
appendTo: "parent",
opacity: 1,
containment: "document",
placeholder: "placeholder-style",
cursor: "move",
delay: 150,
start: function(event, ui) {
$(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')
ui.helper.css('display', 'table')
},
stop: function(event, ui) {
ui.item.css('display', '')
}
});
.sort-table{
width: 100%;
border: 1px solid #cecece;
background-color: #d5a45a;
}
thead{
background-color: #0e79c4;
}
th{
font-size: 1em;
line-height: 1.375em;
font-weight: 400;
background-color: #0e79c4;
vertical-align: middle;
padding: 0.5em 0.9375em;
text-align: left;
}
tr{
border: 1px solid #cecece;
}
td{
padding: 1em;
vertical-align: middle;
display: table-cell;
border-top: 1px solid #cecece;
}
.hidden-td{
display: none;
}
.placeholder-style{
background-color: grey;
}
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<table class="sort-table">
<thead>
<tr>
<th class="header-td">Column1 </th>
<td class="hidden-td">row1 hidden td</td>
<th class="header-td">Column2 </th>
<th class="header-td">Column3 </th>
<th class="header-td">Column4 </th>
</tr>
</thead>
<tbody>
<tr>
<td class="body-td">row1 td1</td>
<td class="body-td hidden-td">row1 hidden td</td>
<td class="body-td">row1 td2</td>
<td class="body-td">row1 td3</td>
<td class="body-td">row1 td4</td>
</tr>
<tr>
<td class="body-td">row2 td1</td>
<td class="body-td hidden-td">row1 hidden td</td>
<td class="body-td">row2 td2</td>
<td class="body-td">row2 td3</td>
<td class="body-td">row2 td4</td>
</tr>
<tr>
<td class="body-td">row3 td1</td>
<td class="body-td hidden-td">row1 hidden td</td>
<td class="body-td">row3 td2</td>
<td class="body-td">row3 td3</td>
<td class="body-td">row3 td4</td>
</tr>
<tr>
<td class="body-td">row4 td1</td>
<td class="body-td hidden-td">row1 hidden td</td>
<td class="body-td">row4 td2</td>
<td class="body-td">row4 td3</td>
<td class="body-td">row4 td4</td>
</tr>
</tbody>
</table>
和一个jsfiddle:http://jsfiddle.net/mjkq4fb6/