jQuery 可排序项目高度

Question

我有一个基于列表的简单 jQuery 可排序，如下所示:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

我创建了一个辅助函数，这样无论项目的内容是什么，辅助函数始终具有相同的固定大小。

我的问题是，如果我拖动一个包含大量内容的项目(即几段文本)，即使我的助手只有一行高度，该项目也不会掉落到下面的项目上，直到它至少移动到我的元素的原始高度。

例如:

<ul>
  <li>Item 1
  line2
  line3
  line4
  line5
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

如果我拖动 item1，我的助手会将其变成单行 - 美观且易于拖动。但是，我仍然需要将鼠标在屏幕上向下移动 5 行，然后才能将 item1 放在 item2 和 item3 之间。一旦我将其拖动到足够的高度，该项目似乎就会按照我的预期运行，并且我不再需要将其拖动到原始高度。

我已经尝试了所有我能想到的可排序选项，但无济于事，希望有人提出建议。

$( '#sortable' ).sortable( {
  placeholder: 'highlight',
  axis: 'y',
  helper: function( event ) {
   return $( this ).find( '.drag' ).clone();
 },
});

Answer 1

经过一番撕心裂肺之后，我将此事件添加到可排序中:

  start: function( event, ui ) {
    $( this ).sortable( 'refreshPositions' )
  },

这似乎可以解决问题，因为我认为 start() 是在创建助手之后调用的，因此刷新位置会重置高度。也许 jQuery 应该自己做这件事，但现在我很高兴。