JQueryUI可排序的thead和tbody在拖动行时隐藏了两个字段

我有一个包含不同行和字段的表。 在一行中，我有两个display:none;字段display:none; 当我拖动这些行时，在

和

有一个像横向填充的效果，表没有收缩，表的元素是。

在第一行中的下一个JsFiddle无法正常工作，但在第二行中只有一个带display:none;字段display:none; 有用。

如果有任何问题请问。

错误的例子

拖动时表：

起初我认为可以通过查找类.hidden-td （具有display: none;的类）的

元素的数量来解决，并查找具有类.placeholder-style的元素（是具有执行拖动时生成的

类，并添加许多

因为

中我正在移动，但不是，不起作用。

我知道有多少字段用这行代码.hidden-td

var numcells = $('.hidden-td').length;

问题

我在第一行有9个元素，在另一个我有8个。在我的函数start()我只在我的占位符中隐藏了一列，所以当我拖动第一行时，剩下一列没有应用类.hidden-td这就是为什么列末尾有空格的原因。

我怎样才能解决这个问题？

https://jsfiddle.net/w52m5ggb/20/

Answer 1

在过去的几天里，我一直在努力使用可排序的插件，我认为需要做以下更改：

1. 添加辅助函数以在辅助对象（可拖动对象）上创建正确的大小以具有正确的大小。

2. 在start函数中，将项html添加到占位符html，以使占位符与原始文本保持一致。

码：

 $("#tbodyproject").sortable({ items: "> tr", appendTo: "parent", helper: "clone", placeholder: "placeholder-style", start: function(event, ui) { $(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td') //copy item html to placeholder html ui.placeholder.html(ui.item.html()); //hide the items but keep the height/width. ui.placeholder.css('visibility', 'hidden'); }, stop: function(event, ui) { ui.item.css('display', '') }, //add helper function to keep draggable object the same width helper: function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { // Set helper cell sizes to match the original sizes $(this).width($originals.eq(index).width()); }); return $helper; }, update: function( event, ui ) { let newOrder = $(this).sortable('toArray'); $.ajax({ type: "POST", url:'/admin/projects/updateOrder', data: {ids: newOrder} }) .done(function( msg ) { location.reload(); }); } }).disableSelection(); 

更新小提琴

Answer 2

创建占位符时 ，它只占用行中的单元格数，并使用这些单元格创建一个空行。

您正在将class hidden-td添加到第n个子2，因此您隐藏了一个单元格。 对于第2行和第2行，这是可以的，但对于第一行则不行，因为该行中还有一个单元格。 请参阅第2行的占位符 ：

第一排：

你可以做的是隐藏占位符中的每个单元格，只显示你需要的数字。 这可以通过CSS完成，如下所示：

 .placeholder-style td { display: none; } .placeholder-style td:nth-child(-n+7) { display: table-cell; } 

结果： https ： //jsfiddle.net/3g3bt80e/1/

Answer 3

您可以在下面的代码段中尝试该方法。

 $("#tabs").tabs(); $("#tbodyproject").sortable({ items: "> tr", appendTo: "parent", helper: "clone", placeholder: "placeholder-style", start: function(event, ui) { ui.helper.css('display', 'table'); // console.log(ui.placeholder.html()) }, stop: function(event, ui) { ui.item.css('display', '') }, update: function( event, ui ) { let newOrder = $(this).sortable('toArray'); $.ajax({ type: "POST", url:'/admin/projects/updateOrder', data: {ids: newOrder} }) .done(function( msg ) { location.reload(); }); } }).disableSelection(); 

 img { width: 100px; } .hidden-td{ display:none; } .table{ background-color:green; border:0; width:100%; } .trdrag{ background-color:yellow; } .trdrag.ui-sortable-handle td.tdslug, .trdrag.ui-sortable-handle td.tdslug img{ text-align:center; align-items:center; display: table-cell; justify-content: center; } .trdrag.ui-sortable-handle td.tdslug{ white-space:normal; word-wrap: break-word; } .trdrag.ui-sortable-handle td.tdslug img{ padding-left:1rem; } .trdrag.ui-sortable-handle { text-align:center; align-items:center; display: table-row; justify-content: center; width:100%; margin-left: .3rem; } .thcenter{ background-color:grey !important; } .ui-sortable-helper { left:0px!important; } .idrow{ width:5%; } .tdvisible{ width:5%; } .tdslug{ width:10%; } .tdimg{ width:15%; } .tdorder{ width:20%; } .tdacciones{ width:40%; } .placeholder-style td { display: none; } .placeholder-style td:nth-child(-n+7) { display: table-cell; } 

    
 
 
 
 
 
 
ID
 
Visible
 
Nombre
 
Header
 
Home
 
Orden
 
Acciones
 
 
 
 
 
1
 
Testing
 
Testing2
 
 Yes 
 
Slug
 
 
 
Order 1
 
 
 Edit  Delete 
 
 
 
 
2
 
Testing
 
 Yes 
 
Slug
 
 
 
Order 1
 
 
 Edit  Delete 
 
 
 
 
3
 
Testing
 
 Yes 
 
Slug
 
 
 
Order 1
 
 
 Edit  Delete 
 
 
 
 
1
 
Testing
 
 Yes 
 
Slug
 
 
 
Order 1
 
 
 Edit  Delete 
 
 
 
 
4
 
Testing
 
 Yes 
 
Slug
 
 
 
Order 1
 
 
 Edit  Delete 
 
 
 
 
5
 
 Yes 
 
Slug
 
 
 
Order 2
 
 
 Edit  Delete