web-dev-qa-db-ja.com

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

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

jqueryjquery-uijquery-ui-sortable
90
oshirowanen

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

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

テストケースの更新 を参照してください

238
mekwall

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

15
DarthJDG

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

2
Gijs

私の場合、私は 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
1
user3780666

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

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

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

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

そして、そのスタイルに高さを与えるだけです。それがうまくいくことを願っています。

1
MANATTWeb