jQuery UI Sortable 表格和单元格在拖动 tr 时缩小

Question

在拖动时我面临两个问题。

1. 当我有一个隐藏的表时，它本身正在缩小td。
2. 拖动的 tr cell( td)s 正在缩小

这是可排序的代码：

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

jsfiddle 链接

Answer 1

用表的收缩问题是因为你有一个隐藏的单元格（并在占位符的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', '')
}

这是一个工作示例

$(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')

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', '')
}

还有一个 jsfiddle：http : //jsfiddle.net/mjkq4fb6/