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

摘要：

我正在并排使用两个表（使用connectlist）的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使它正常工作（并且不得不更新表的某些样式）。现在我唯一的问题是，当悬停时，这些空表上的突出显示行不是全角（我的猜测是由于display：block）。这是一个屏幕截图，您可以在其中看到黄色的可排序悬停未满行。这不是一个障碍，但是如果有行的话，它看起来会好得多。

最佳答案

我找到了适用于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;
}

然后必须将其添加到sortable中：

            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