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

Question

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

我有两张桌子相对排列（简化示例）

 <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>

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

正如安东所指出的，这似乎可以在Chrome但不是任何其他浏览器（我也需要在其他浏览器中工作）

我使用display:block使它工作（并且必须更新我的表格的一些样式）。我现在唯一的问题是，悬停时，这些空表上的突出显示行不是全宽的（我猜是因为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{
    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());
            },

但这会让桌子看起来不一样

演示

如果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');
           }
       },

演示