2009-09-29 31 views
7

私は次のようにリストに基づいて、単純なjQueryのソート可能なを持っている:jQueryのソート可能なアイテムの高さ

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

私はそのように関係なく、項目の内容があるかもしれないもののヘルパー関数を作成しました、ヘルパーは常に同じ固定サイズです。

私の問題は、多くのコンテンツを持つアイテムをドラッグすると(テキストのいくつかの段落が表示されます)、ヘルパーは1行の高さであっても、アイテムはそのアイテムまでドロップされません少なくとも私のアイテムの元の高さを移動しています。例えば

:私はITEM1をドラッグすると

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

私のヘルパーは、単一の行には、このターン - 素晴らしく、ドラッグしやすいです。しかし、item1をitem2とitem3の間にドロップするには、マウスの5行目を画面の下に移動する必要があります。私はそれを十分な高さをドラッグすると、アイテムは、私が期待するように機能するように見える、と私はもはや元の高さをドラッグする必要はありません。

私は考えることのできるソート可能なオプションをすべて試しましたが、役に立たず、誰かに提案があることを期待しています。

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

答えて

0

あなたは、ドラッグされている事業部の現在の高さをつかむ変数に保存し、ドラッグされているDIVに、一般的な高さを割り当てることができます。それが配置されたら、コールバックを使用して変数内の高さを再割り当てします。あなたはまた、多くの髪、引き裂き後forceHelperSize

25

を検討する必要があります

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

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

私はソート可能にこのイベントを追加:

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

私がスタート(だと思うとトリックを行うようです)ヘルパーが作成された後に呼び出されるため、位置を更新すると高さがリセットされます。おそらくjQueryはこれを行うべきですが、今のところ私は満足しています。

+0

のでforceHelperSize(http://jqueryui.com/demos/sortable/#option-forceHelperSizeは)全く使用していませんか? – jakeisonline

+4

@ジョンホーリー、私は+1000回upvoteことができればいいね。 – shmeeps

+0

私はshmeepsに同意します!私は完全な損失だった – orourkedd

3

次のことが私の仕事:

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

私のためにも、私はなぜisntそれupvoted答えを知っている –

関連する問題