jQuery可排序项目高度 [英] jQuery sortable item height

问题描述

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

I've got a simple jQuery sortable based on a list as follows:

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

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

I've created a helper function so that regardless of what the contents of an item may be, the helper is always the same fixed size.

我的问题是，如果我拖动一个包含很多内容的项目(说几段文字)，即使我的助手的高度只有一行，该项目也不会掉落到下面的项目上至少走了我物品的原始高度.

My problem is that if I drag an item that has a lot of content (says several paragraphs of text), even though my helper is only a single line in height, the item will not drop onto the item below until it has travelled at least the original height of my item.

例如:

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

如果我拖动item1，我的助手会将其变成一行-美观且易于拖动.但是，在将item1放置在item2和item3之间之前，我仍然需要在屏幕上向下移动鼠标5行.一旦我将其拖动到足够的高度，该项目就可以正常发挥作用，并且不再需要将其拖动到原始高度.

If I drag item1 my helper turns this into a single line - nice and easy to drag. However, I still need to move the mouse 5 lines down the screen before item1 can be dropped between item2 and item3. Once I do drag it sufficient height the item then seems to function as I would expect, and I no longer need to drag it the original height.

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

I've tried all of the sortable options I can think of but to no avail and am hoping that someone has a suggestion.

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

推荐答案

经过一番梳理之后，我将此事件添加到了可排序对象中:

After much hair-tearing I added this event to the sortable:

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

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

It seems to do the trick as I think start() is called after the helper has been created, so refreshing the positions resets the height. Probably jQuery should do this itself, but for now I'm happy.

这篇关于jQuery可排序项目高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！