jQuery UI可排序-无法将TR放入空的Tbody中 [英] Jquery ui-sortable - unable to drop tr in empty tbody

问题描述

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

I have two connected tbody elements allowing me to drag rows between two tables. Everything works fine until all rows are removed from either table.

将所有行都拖到另一张表上时，躯干高度降低，这使得(几乎)不可能将行放回内部.

When all rows have been dragged to the other table the tbody height decreases making it (near)impossible to drop rows back inside.

是否存在解决此问题的已知方法? (最小高度不适用于tbody元素)

Is there a known workaround for this problem? (min-height doesn't work on a tbody element)

非常感谢.

推荐答案

您可以做的是创建对"sortable"机制不可见的行.可能最简单的方法是使用项目"选项.

What you can do is create a row that is invisible to the "sortable" mechanism. Probably the easiest way to do this is with the "items" option.

假设您的HTML看起来像这样

Let's say your HTML looks like this

<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中就可以拥有

Then in jquery you can have

$('.sortable').sortable({
    items: ">*:not(.sort-disabled)"
});

这是一个小技巧，但是我认为，如果您尝试一下这种变化(给.sort-disabled行提供CSS高度等信息)，您可能会找到适合您的东西.您还可以尝试在第一个和最后一个都有.sort-disabled的行，以便中间的位置是放置目标.

It's a bit of a hack, but I think if you play around with variations of this (give the .sort-disabled row some height in CSS etc.) you can probably find something that works for you. You could also try having a .sort-disabled row both first and last, so that the place in the middle is the drop target.

希望这会有所帮助！

这篇关于jQuery UI可排序-无法将TR放入空的Tbody中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！