jQuery UI可排序表和单元格在拖动tr时缩小

虽然拖动我面临两个问题。

1. 当我有一个隐藏的td时，它自我缩小了。
2. 拖曳的tr细胞（ td ）正在萎缩

这是可排序的代码：

 $('tbody').sortable({ items: ">tr", appendTo: "parent", opacity: 1, containment: "document", placeholder: "placeholder-style", cursor: "move", delay: 150, }); 

jsfiddle链接

Answer 1

缩小表的问题是因为你有一个隐藏的单元格（并且在sortable为你创建的占位符中有5个单元格，而其中没有单元格被隐藏。你可以通过在placeholder设置第二个td来解决这个问题。一旦你开始拖动隐藏：

 $(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; } 

   
 
 
 
Column1 
 
row1 hidden td
 
Column2 
 
Column3 
 
Column4 
 
 
 
 
 
row1 td1
 
row1 hidden td
 
row1 td2
 
row1 td3
 
row1 td4
 
 
 
row2 td1
 
row1 hidden td
 
row2 td2
 
row2 td3
 
row2 td4
 
 
 
row3 td1
 
row1 hidden td
 
row3 td2
 
row3 td3
 
row3 td4
 
 
 
row4 td1
 
row1 hidden td
 
row4 td2
 
row4 td3
 
row4 td4