9

次のように、リストに基づいてソート可能な単純な jQuery があります。

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

アイテムの内容に関係なく、ヘルパーが常に同じ固定サイズになるように、ヘルパー関数を作成しました。

私の問題は、多くのコンテンツ (複数の段落のテキストなど) を含むアイテムをドラッグすると、ヘルパーの高さが 1 行しかない場合でも、少なくとも移動するまでアイテムが下のアイテムにドロップされないことです。私のアイテムの元の高さ。

例えば：

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

item1 をドラッグすると、ヘルパーがこれを 1 行に変換します - 素晴らしく簡単にドラッグできます。ただし、item1 を item2 と item3 の間にドロップするには、マウスを画面の 5 行下に移動する必要があります。十分な高さにドラッグすると、アイテムは期待どおりに機能するようになり、元の高さまでドラッグする必要がなくなりました。

考えられるすべてのソート可能なオプションを試しましたが、役に立ちませんでした。誰かに提案があることを望んでいます。

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

3 に答える 3

30

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

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

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.

于 2009-09-30T08:17:54.177 に答える
3

以下は私のために働いた：

stop: function(event,ui){
    ui.item.height("auto");
}
于 2011-04-20T23:52:45.913 に答える
0

ドラッグされている Div の現在の高さを取得し、それを変数に保存して、ドラッグされている DIV に一般的な高さを割り当てることができます。配置したら、コールバックを使用して変数内の高さを再割り当てします。

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

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

forceHelperSizeも検討してください。

于 2009-09-29T20:03:31.467 に答える