我有两个连接的 tbody 元素，允许我在两个表之间拖动行。一切正常，直到从任一表中删除所有行。
当所有行都被拖到另一个表时，tbody 高度会降低，从而（几乎）不可能将行放回内部。
是否有针对此问题的已知解决方法？ （最小高度不适用于 tbody 元素）
非常感谢。
【问题讨论】：
标签： jquery html jquery-ui user-interface jquery-ui-sortable
您可以做的是创建一个对“可排序”机制不可见的行。可能最简单的方法是使用“items”选项。
假设您的 HTML 如下所示
<tbody class="sortable">
<tr><td>stuff</td></tr>
<tr><td>stuff</td></tr>
<tr><td>stuff</td></tr>
<tr class="sort-disabled"><td></td></tr>
</tbody>
然后在jquery中你可以拥有
$('.sortable').sortable({
items: ">*:not(.sort-disabled)"
});
这有点小技巧，但我认为如果您尝试使用这种变体（在 CSS 等中给 .sort-disabled 行一些高度），您可能会找到适合您的东西。您也可以尝试在第一行和最后一行设置一个 .sort-disabled 行，这样中间的位置就是放置目标。
希望这会有所帮助！
【讨论】：
.sort-disabled) 作为第一个元素，上面的不是问题。使用空列表，您只能将行放在填充器下方，而不能放在它上方。因此，如果 padder 是第一个，它将保持第一个。如果是最后一个，它将改变位置，使您的空格不一致。
.sort-disabled:only-child td {height:.5rem}来解决。空白仅在表格为空时显示。
我有同样的问题，并设法通过这样做解决了一半：
$('table').sortable(
{
connectWith: 'table',
items: 'tbody tr'
});
这允许我将行移动到一个空表中，它看起来不错，但是元素是在 tbody 之后插入的，而不是在它里面。我认为 Danny Robert 的回答对我有用，但我有兴趣看到非 hack 解决方案。
【讨论】：
receive: function(e, ui){ $(this).find("tbody").append(ui.item); }
很难强制使用表 esp。 tbody 在空的时候有高度。所以我按照以下方式做到了。
<div class="ui-widget sortablecolumn">
<table>
</table>
</div>
$( '.sortablecolumn').sortable(
{
connectWith: '.sortablecolumn',
items: 'table > tbody > *',
receive: function(ev, ui) {
ui.item.parent().find('table > tbody').append(ui.item);
}
});
$( '.sortablecolumn' ).disableSelection();
关键方面是items 选择器和receive 事件处理程序，其中添加的项目被移动到表体中。
现在可以正常使用了。
【讨论】：
var $parent = ui.item.parent(); if($parent.is('table')){$parent.find('tbody').append(ui.item);} 解决了我的问题，这与您所拥有的非常接近。
结帐my post about this - 您可以通过将方法附加到增加空容器高度的点击来解决：
function sortAndDrag() {
//show BEFORE sortable starts
$(".sortableClass").bind('click mousedown', function(){
$(".sortableClass").each(function (c) {
if ($("tbody", this).size() == 0) {
$(this).addClass("aClassWhichGivesHeight")
}
})
});
//enable sortable
$(".sortableClass").sortable({
connectWith: ".sortableClass",
stop: function (a, d) {
$("tbody").removeClass("aClassWhichGivesHeight");
}
});
}
类似的东西？
【讨论】：
display: table-row-group 或类似的设置。
以下是我解决无法将 tr 放入空 tbody 的问题的方法：
$(function() {
var sort1 = $('#sort1 tbody');
var sort2 = $('#sort2 tbody');
sizeCheck(sort1);
sizeCheck(sort2);
//Start the jQuery Sortable for Active and Fresh Promo Tables
$("#sort1 tbody, #sort2 tbody").sortable({
items: ">*:not(.sort-disabled)",
deactivate: function(e, ui) {
sizeCheck(sort1);
sizeCheck(sort2);
},
//Connect tables to pass data
connectWith: ".contentTable tbody"
}).disableSelection();
});
//Prevent empty tbody from not allowing items dragged into it
function sizeCheck(item){
if($(item).height() == 0){
$(item).append('<tr class="sort-disabled"><td></td></tr>');
}
}
【讨论】：
我知道这个问题已被标记为“已回答”，但我还想添加另一种方法来解决这个问题。
我所做的是检查列表是否为空，如果是，则创建一个新的行元素并将其注入到 tbody 中。我在 td 中放了一条消息，例如“No more items”。
一旦将一个项目放入“空”列表，空消息将被销毁。
我使用 Mootools，因此缺少示例代码。
【讨论】：
我使用：
$(document).ready(function(){
$( "#sortable1 tbody, #sortable2 tbody" ).sortable({
connectWith: ".connectedSortable",
remove: function(event, ui){ if($(this).html().replace(/^\s+/, "") == '') { $(this).html('<tr class="tmp_tr nobr"><td colspan="7"> </td></tr>'); }},
update: function( event, ui ) {$(this).find('.tmp_tr').remove();},
}).disableSelection();
});
【讨论】：
js
$(".sortable").sortable({
items: 'tbody > tr',
connectWith: ".sortable"
});
css
.sortable {
background-color: silver;
height: 10px;
}
.sortable td { background-color: white; }
html
<table class='sortable'>
<tbody>
<tr><td colspan="2" class="drop-row" style="display: none;"></td></tr>
</tbody>
</table>
更多细节，甚至更好的代码 https://devstuffs.wordpress.com/2015/07/31/jquery-ui-sortable-with-connected-tables-and-empty-rows/
【讨论】：
简单的解决方案（纯 CSS）：
tbody:after {
content:" ";
height:30px;
}
空格不是标准空格。它是一个不可见的空白字符，如下所示： Invisible characters - ASCII
在 FF 和 Chrome 中为我工作。
【讨论】：
<tbody></tbody>[here]
在我的情况下，当没有项目存在时，table 和 tbody 折叠到大小为 0x0。有效的是为 table 和 tbody 提供一些最小尺寸，如下所示：
table.items-table {
width: 100%; /*needed for dropping on empty table to work - can be any non-zero value*/
}
table.items-table >tbody { /*needed for dropping on empty table to work */
display: block;
min-height: 10px;
}
这就是我们所需要的。
【讨论】：
根据 Ismael Miguel 对 Cetnar 答案的评论，这是我的工作解决方案。
sorting 专栏。jQuery 代码：
$('.draggable-zone').sortable({
items: 'tr.draggable',
helper: 'clone',
appendTo: 'body',
connectWith: '.draggable-zone',
update: function(e, ui) {
$.ajax({
url: '/inve/new/sort',
type: 'POST',
data: $(this).sortable('serialize', {
key: $(this).attr('data-partl')
})
});
},
receive: function(e, ui) {
var $parent = ui.item.parent();
if($parent.is('table')){
$parent.find('tbody').append(ui.item);
}
}
});
HTML / Smarty 模板（仅限 1 个表格）：
<table class="table table-striped table-hover table-bordered draggable-zone" data-partl="normal[]">
<tbody>
{foreach $data.normal as $task}
<tr class="draggable" id="sort_{$task.id}">
<td><b>{$task.title}</b></td>
...
</tr>
{/foreach}
</body>
</table>
...
【讨论】：