Jquery ui-sortable - 无法删除tr in empty tbody

Question

我有两个连接的tbody元素,允许我在两个表之间拖动行.一切正常,直到从任一表中删除所有行.

当所有行都被拖动到另一个表时,tbody高度减小,使得(几乎)不可能将行放回到内部.

这个问题有一个已知的解决方法吗？(最小高度不适用于tbody元素)

提前谢谢了.

Answer 1

你可以做的是创建一个对"可排序"机制不可见的行.可能最简单的方法是使用"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行,以便中间的位置是放置目标.

希望这可以帮助!

Answer 2

强制表esp很难.它是空的,有高度.所以我按照以下方式做到了.

<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事件处理程序,其中添加的项目被移动到表体中.

现在它工作正常.