jQuery 可排序项目高度答案

【问题标题】：jQuery sortable item heightjQuery 可排序项目高度
【发布时间】：2010-12-02 10:47:02
【问题描述】：

我有一个基于列表的简单 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();
 },
});

【问题讨论】：

标签： jquery height jquery-ui-sortable

【解决方案1】：

费尽心思后，我将此事件添加到可排序中：

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

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

【讨论】：

所以 forceHelperSize (jqueryui.com/demos/sortable/#option-forceHelperSize) 没用？
我同意shmeeps！我完全不知所措
我花了 2 个小时试图解决这个问题，然后才找到这个 gem。非常感谢！
现有的赞成票没有这个解决方案应得的那么多。 +9001
最有帮助的答案！ :) +1e1024

【解决方案2】：

以下内容对我有用：

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

【讨论】：

对我来说也是如此，我不知道为什么它不是赞成的答案

【解决方案3】：

您可以获取被拖动的 Div 的当前高度，将其保存在一个变量中，然后为被拖动的 DIV 分配一个通用高度。放置后，使用回调重新分配变量内的高度。

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

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

您可能还想考虑forceHelperSize

【讨论】：