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，我的助手会将其转换为单行-非常容易拖动。然而，在item2和item3之间放置item1之前，我仍然需要将鼠标移动到屏幕下方5行。一旦我将其拖动到足够的高度，该项似乎就像我期望的那样运作，并且我不再需要将其拖动到原始高度。

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

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

- John

Answer 1

经过了长时间的努力，我在可排序的项目中添加了这个事件：

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

我认为这很有效，因为我认为在创建helper之后调用了start()方法，所以刷新位置会重置高度。可能jQuery应该自己做这件事，但目前我很满意。

- John

---

那么 forceHelperSize（http://jqueryui.com/demos/sortable/#option-forceHelperSize）没有用处吗？ - jakeisonline

我同意shmeeps的观点！我完全不知所措。 - orourkedd

我在找到这个宝石之前花了2个小时来解决问题。非常感谢！ - rstepanenko

这个解决方案所值的赞数远不止现有的数量。+9001 - GTCrais

最有帮助的答案！ :) +1e1024 - Karlen Kishmiryan

Answer 2

下面的方法对我有用：

stop: function(event,ui){
    ui.item.height("auto");
}

- Alan M

---

对我来说也是一样，我不知道为什么它不是最受欢迎的答案。 - John Smith

Answer 3

你可以获取当前拖动的 Div 的高度，将其保存在一个变量中，并为被拖动的 DIV 分配一个通用高度。一旦放置完成，使用回调函数重新分配变量中的高度。

var curHeight = $(div).height();  

$(div).css({height: 20px;});

您可能还想考虑 forceHelperSize

- jakeisonline