jqueryのソート可能なプレースホルダーの高さの問題

93

何らかの理由で、私の並べ替え可能なアイテムのプレースホルダーは約10pxです。並べ替え可能なすべてのアイテムの高さが異なります。移動するアイテムに合わせて各プレースホルダーの高さを変更するにはどうすればよいですか？

jquery jquery-ui jquery-ui-sortable

jsFiddleに投稿できますか？

— サティシュ

これは、アイテムを別の場所にドラッグアンドドロップしたときに発生しますか？または、ページをロードした後、アイテムはすでにこの高さを持っていますか？とにかくここを見てください：bugs.jqueryui.com/ticket/4482と述べられているように回避策を試してください

— Mohammad

250

通常、これは、プレースホルダーの高さを、startイベントに並べ替えられるアイテムの高さに設定するコールバックをバインドすることで解決します。これは、プレースホルダーの表示方法をきめ細かく制御できるシンプルなソリューションです。

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }
});

更新されたテストケースを見る

— mekwall
ソース

21

マージンとパディングが要素の実際の高さを

— ゆがめる

申し訳ありませんが、うまく機能しないと思います。このリンクjsfiddle.net/t8gcZ/1では、プレースホルダーの高さはアイテムの高さ（237px）と同じですが、開始時に、アンダーアイテムがゴミの上に移動したことがわかりました

— Makio

@Makioそれはパディングの下のためです。これを解決するには、プレースホルダーにpadding-bottomを追加します。jsfiddle.net/t8gcZ/136

— mekwall

15

forcePlaceholderSize:trueプロパティを設定してみましたか？jQuery UI Sortable ドキュメントページを読んでください。

— ダースJDG
ソース

2

私はそれを試しましたが、trueまたはfalseを追加しても、元のサイトと同じで10pxの高さに保たれます。このjsfiddleでは、適切にサイズ変更されますが、forceplaceholdersizeをtrueまたはfalseに設定しても違いはありません。jsfiddle.net/t8gcZ

— oshirowanen

@oshirowanen：どのブラウザでテストしていますか？

— DarthJDG

@oshirowanen：実際に壊れているコードへのリンクを投稿できますか？

— DarthJDG

2

それは私にとってはうまくいきます。CSS .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }を.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }（高さを削除して）に変更するだけでいいので、@ DarthJDGは正しいです！

— JP Hellemons、2011

高さが動的でない場合にのみ機能する@JPHellemons

— Erdal G.

2

あなたの要素はありますdisplay: blockか？インライン要素を使用すると、プレースホルダーが高さを正しく維持できない場合があります。例えば。このjsFiddleには、あなたが説明した問題と同様の問題があるようです。クラスに追加display: blockすると.portlet修正されます。

— ギス
ソース

フローティング要素も同様です。リスト要素がフローティングの場合、プレースホルダーもフローティングする必要があります。

— エイドリアンマリニカ2013年

2

「ui.item.height（）」を使用する代わりに、「ui.helper [0] .scrollHeight」を使用して、外部コンテナからアイテムをドラッグしたときの結果を安定させることもできます。

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
});

— エランチェジアン・ナラヤナサミ
ソース

1

プレースホルダのスタイルを、並べ替え可能のオプションとして設定できます。

$( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
});

そして、そのスタイルに高さを与えるだけです。うまくいきますように。

— MANATTWeb
ソース

2

しかし、それは高さを修正しませんか？高さがコンテンツと同じである必要があります。

— オシロワネン

1

私の場合、JP Hellemonsに似た解決策を見つけました。プレースホルダーの高さを（！importantを使用して）カスタムに設定し、バックグラウンドで可視性を設定して自分自身の変更を確認します（この方法でプレースホルダーのスタイルを設定することもできます））。

これは、 display: inline-block;

.ui-sortable-placeholder { 
     background:red !important; 
     height: 2px !important; // this is the key, set your own height, start with small
     visibility: visible !important;
     margin: 0 0 -10px 0; // additionaly, you can position your placeholder, 
     }                    // in my case it was bottom -10px

— ユーザー3780666
ソース