具有不同高度的 JQuery 可排序移动行答案

【问题标题】：JQuery sortable moving rows having different heights具有不同高度的 JQuery 可排序移动行
【发布时间】：2023-01-20 02:32:45
【问题描述】：

我有一个 3 行的表：

<table id='table'>
   <tr id='row0'>
       <td> 
          <table>
                 <tr><td>sub1</td></tr>
                 <tr><td>sub2</td></tr>
                 <tr><td>sub3</td></tr>
                 <tr><td>sub4</td></tr>
                 <tr><td>sub5</td></tr>
                 <tr><td>sub6</td></tr>
                 <tr><td>sub7</td></tr>
                 <tr><td>sub8</td></tr>
                 <tr><td>sub9</td></tr>
                 <tr><td>sub10</td></tr>
           </table>
       </td></tr>
   <tr id='row1'><td>row 1</td></tr>
   <tr id='row2'><td>row 2</td></tr>
</table>

我启用这样的排序：

  $('#table').sortable( {
       items: '> tbody > tr',
       handle: 'td:not(.no-drag)',
       cursor: 'pointer',
       cancel: '.no-drag',
       axis: 'y',
       dropOnEmpty: false,
          
       sort: function () {
           if ($(this).closest("table").attr('id') != '@Model.TableId') {
               $(this).sortable("cancel");
           }
       },

       start: function (e, ui) {

          ui.item.find('table').hide();
          ui.item.height('auto');
          $(ui.placeholder[0]).height('auto');                    
       },

       stop: function (ev, ui) {
                ui.item.find('table').show();
            }
  });

我第一次在包含表格的#row0 周围拖动，在占位符正确显示在#row1 和#row2 之间之前，我必须将#row0 向下移动到与表格及其 10 个子行大致相同的高度。这不是一个好的用户体验。所以我尝试在 draggin 开始时折叠表格，但即使我折叠表格并尝试将排序/拖动中涉及的元素的高度设置为自动，第一次，也是第一次拖动，它仍然需要降低桌子的高度。然后它稳定下来。

我尝试使用“助手”功能并在开始像这样拖动之前设置高度：

helper: function(e,item){ return item.height(30); }

或者像这样：

helper: function(e,item){
    item.find('table').hide();
    item.height('auto');
    return item; 
}

但是我第一次拖动我仍然需要降低表格的原始高度（高度#row0是在折叠内表之前）

有任何解决这个问题的方法吗？

【问题讨论】：

这一行，if ($(this).closest("table").attr('id') != '@Model.TableId') 有很多问题。 this 是行，然后你找到一个子表。然而，您的所有子表都没有 ID 属性。这表明该语句将始终为true。除此之外，我们无法复制这个问题，因为我们不知道@Model.TableId 是什么。

标签： jquery jquery-ui-sortable

【解决方案1】：

考虑以下示例。

$(function() {
  $('#table').sortable({
    items: '> tbody > tr',
    cursor: 'pointer',
    cancel: '.no-drag',
    axis: 'y',
    dropOnEmpty: false,
    start: function(e, ui) {
      ui.item.find('table').hide();
      ui.item.find("td").append("<span>---</span>");
      ui.item.height('auto');
      $(ui.placeholder[0]).height('auto');
    },
    stop: function(ev, ui) {
      ui.item.find("span").remove();
      ui.item.find('table').show();
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<table id='table'>
  <tr id='row0'>
    <td>
      <table>
        <tr>
          <td>sub1</td>
        </tr>
        <tr>
          <td>sub2</td>
        </tr>
        <tr>
          <td>sub3</td>
        </tr>
        <tr>
          <td>sub4</td>
        </tr>
        <tr>
          <td>sub5</td>
        </tr>
        <tr>
          <td>sub6</td>
        </tr>
        <tr>
          <td>sub7</td>
        </tr>
        <tr>
          <td>sub8</td>
        </tr>
        <tr>
          <td>sub9</td>
        </tr>
        <tr>
          <td>sub10</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr id='row1'>
    <td>row 1</td>
  </tr>
  <tr id='row2'>
    <td>row 2</td>
  </tr>
</table>

这会隐藏表格并为该行提供一些内容，供用户识别为他们正在移动的项目的参考。一旦掉落，它就会恢复原状。

【讨论】：