有没有办法在 table 上使用带有隐藏列的 jQueryUI sortable

Question

最近我不得不修复 table 上的一个奇怪行为，它在行上使用 jQueryUI sortable。

当我拖动并移动一行时，table 会缩小。

经过一些研究，我能够在简单的 table 上重现该行为：

#sort2 .hidden {
  display: none;
}
.fullsize {
  width: 100%;
}
.fix30 {
  width: 30px;
}
    
.fix100 {
  width: 100px;
}

    <html>
      <body>
      <table id="sort1" class="fullsize">
      <thead><tr>
        <th class="hidden">hide</th>
        <th class="hidden">hide</th>
        <th class="hidden">hide</th>
        <th class="fix30">Test1</th>
        <th>Test2</th>
        <th class="fix100">Test3</th>
        <th class="fix100">Test4</th>
        <th class="fix100">Test5</th>
      </tr></thead>
      <tbody>
        <tr>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
      </table>
      
      <hr />
      
        <table id="sort2" class="fullsize">
      <thead><tr>
        <th class="hidden">hide</th>
        <th class="hidden">hide</th>
        <th class="hidden">hide</th>
        <th class="fix30">Test1</th>
        <th>Test2</th>
        <th class="fix100">Test3</th>
        <th class="fix100">Test4</th>
        <th class="fix100">Test5</th>
      </tr></thead>
      <tbody>
        <tr>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
      </table>
      
      </body>
    </html>

    var fixHelperModified = function(e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index)
        {
          $(this).width($originals.eq(index).width())
        });
        return $helper;
    };
    
    $("tbody").sortable({
        helper: fixHelperModified 
        
    }).disableSelection();

我的猜测，当某些列被隐藏时，导航器认为该行中的列比 header 中的列多。

我的问题：有没有人遇到同样的问题以及如何解决？

Answer 1

我可以通过稍微修改你的 JS 来修复它，here 我就是这样做的：

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      $(this).outerWidth($originals.eq(index).outerWidth())
    });
    
    return $helper;
};

$("tbody").sortable({
  start: function(event, ui) {
    ui.helper.css('display', 'table')
  },
  stop: function(event, ui) {
    ui.item.css('display', '')
  },

    helper: fixHelperModified ,
    start: function(event, ui) {
    return ui.placeholder.children().each(function(index, child) {
      var source;
      source = ui.helper.children().eq(index);
      $(child).removeAttr('class').removeAttr('colspan');
      $(child).addClass(source.attr('class'));
      if (source.attr('colspan')) {
        return $(child).attr('colspan', source.attr('colspan'));
      }
    });
  }
    
}).disableSelection();

发生此问题是因为您有一个隐藏的单元格（并且在 sortable 为您创建的占位符中有 8 个单元格，但没有一个是隐藏的

有没有办法在 table 上使用带有隐藏列的 jQueryUI sortable

Is there a way to use jQueryUI sortable on table with hidden columns

jquery-ui

html-table

jquery-ui-sortable