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行，然后才能在item2和item3之间删除item1。一旦我拖动足够的高度，项目似乎按照我的预期运行，我不再需要将其拖动到原始高度。

我已经尝试了所有可以考虑的可选择的选项，但没有用，我希望有人有建议。

$( '#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应该自己做，但是现在我很高兴。

Answer 2

以下对我有用：

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

Answer 3

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

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

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

您可能还想考虑forceHelperSize

jQuery可排序的项目高度

3 个答案: