jQuery可排序的项目高度

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

  • Item 1
  • Item 2
  • Item 3
  • Item 4

我已经创建了一个辅助函数,因此无论项目的内容是什么,帮助程序始终是相同的固定大小。

我的问题是,如果我拖动一个内容很多的项目(说几段文字),即使我的帮手只有一行高度,项目也不会掉到下面的项目上,直到它至少走过我的项目的原始高度。

例如:

 
  • Item 1 line2 line3 line4 line5
  • Item 2
  • Item 3
  • Item 4

如果我拖动item1,我的帮助器将其转换为单行 – 很好且易于拖动。 但是,我仍然需要在屏幕上向下移动5行,然后才能在item2和item3之间删除item1。 一旦我拖动足够的高度,项目似乎按照我的预期运行,我不再需要将其拖动到原始高度。

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

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

经过多次撕裂后,我将此事件添加到可排序的:

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

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

以下对我有用:

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

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

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

您可能还想考虑forceHelperSize