使用 jquery-UI Sortable，当没有行时，如何将行拖到表上？

Question

总结：

我将jquery UI sortable 与两个表并排使用（使用连接列表），效果很好，除非其中一个表没有行，我无法将另一表中的一行拖到“空”表上我想知道这是否受支持或是否需要解决方法？

详情/代码：

我有两张桌子相互排成一排（简化示例）

 <table id="table1" style="float:left;width:260px;">
       <thead><tr><th>Id</th><th>Name</th></tr></thead>
       <tbody class=sortable>

            <tr><td>1</td><td>Name 1</td></tr>
            <tr><td>2</td><td>Name 2</td></tr>
            <tr><td>3</td><td>Name 3</td></tr>

       </tbody>
  </table>

 <table id="table2" style="float:left;width:260px;">
       <thead><tr><th>Id</th><th>Name</th></tr></thead>
       <tbody class=sortable>

            <tr><td>1</td><td>Name 1</td></tr>
            <tr><td>2</td><td>Name 2</td></tr>
            <tr><td>3</td><td>Name 3</td></tr>

       </tbody>
  </table>

我有以下 jquery UI 可排序代码：

        $(".sortable").sortable({
            connectWith: ".sortable",
            placeholder: "ui-state-highlight",
            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());
                });
                $helper.css("background-color", "rgb(223, 240, 249)");
                return $helper;
            }
        });
        $("#sortable").disableSelection();

这是我的 CSS：

   <style type="text/css">
    .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
    .ui-sortable-helper {
       transform: rotate(1deg);
       -moz-transform: rotate(1deg);
       -webkit-transform: rotate(1deg);
    }
  </style>

如果其中一个表碰巧没有行，我不能再将一行拖到该表上。当我查看萤火虫时，即使没有行，我仍然可以看到 TBODY，所以我不确定出了什么问题？

更新：

正如 Anton 所说，这似乎在 Chrome 中有效，但在任何其他浏览器中都无效（我也需要在其他浏览器中工作）

更新 #2：

我使用 display:block 让它工作（并且必须更新我的表格的一些样式）。我现在唯一的问题是，当您悬停时，这些空表上的突出显示行不是全宽（我猜是因为显示：块）。这是一个屏幕截图，您可以在其中看到黄色的可排序悬停不是整行。这不是一个阻止程序，但如果它与有行的情况一致，它看起来会更好。

Answer 1

我找到了一个适用于 Firefox 和 IE 的解决方法

        <tr><td></td><td></td></tr>
        <tr><td>1</td><td>Name 1</td></tr>
        <tr><td>2</td><td>Name 2</td></tr>
        <tr><td>3</td><td>Name 3</td></tr>

在 tbody 中创建一个空的<tr>

DEMO

更新

找到另一种解决方法

tbody{
    display:block;
    min-height:10px; 
}

然后您必须将其添加到可排序中：

            start: function(e, ui ){
                ui.placeholder.height(ui.helper.outerHeight()-10);
                ui.placeholder.find("td").css("width", ui.helper.width());
            },

但这会使表格看起来不同

DEMO

如果tbody不包含这样的元素，你可以添加类

  stop: function (e, t) {
           if ($(this).children().length == 0) {
               $(this).addClass('test');
           } 
           if($(t.item).closest('tbody').children().length >0){
                  $(t.item).closest('tbody').removeClass('test');
           }
       },

DEMO