2

アイテムを選択して並べ替えることができるように、jQueryUIの「並べ替え可能な」プラグインを使用しています。

プラグインを設定して、2つのリストを作成しました。1つは「利用可能な」アイテム用で、もう1つは「選択済み」アイテム用です。

プラグインは期待どおりに機能します。あるリストから別のリストにアイテムを移動できます。

ただし、リストから1つのアイテムを削除すると、リストの高さが低くなります。それを修正する方法はありますか？

実際、両方のリストの外側の境界線を左側のアイテムの最初の高さに設定したいと思います（最初は、すべてのアイテムが最初のリストにあります）

この写真は私がやりたいことを説明していますここに画像の説明を入力してください：

赤い線が欲しいです。両方のリストにこのサイズを固定してもらいたい。

これが私のコードです（実際にはasp.net Webページから生成されます）：

<script type="text/javascript">
    $(function () {
        $("#sourceItems").sortable({
            connectWith: "#targetItems",
            update: function (event, ui) {
                $("#selectedUserIDs").val(
                    $("#targetItems").sortable('toArray')
                    );
            },
            placeholder: "ui-state-highlight"
        });
        $("#targetItems").sortable({
            connectWith: "#sourceItems",
            placeholder: "ui-state-highlight"
        });

        $("#sourceItems, #targetItems").disableSelection();
    });
</script>
<style type="text/css">
#sourceItems, #targetItems { list-style-type: none; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 230px; border:solid 1px black; }
#sourceItems li, #targetItems li { margin: 5px; padding: 5px; width: 200px; height: 12px; }
</style>
<div style="float: left; display: inline-block; width:fill-available">
    <p>Available :</p>
    <ul id="sourceItems" class="droptrue">
        <li class="ui-state-default" id='i1'>item1</li>        
        <li class="ui-state-default" id='i32'>item2</li>        
        <li class="ui-state-default" id='i47'>item3</li>        
        <li class="ui-state-default" id='i46'>item4</li>
    </ul>
</div>

<div style="float: left; display: inline-block;">
    <p>Selected :</p>
    <ul id="targetItems" class="droptrue">
    </ul>
</div>
<div style="display: none">
    <input name="selectedUserIDs" type="text" id="selectedUserIDs" />
</div>

非表示の入力フィールドは、選択したアイテムを保存するためのコンテナーです（フォームとともに投稿されます）。

両方のリストに追加.height($("#sourceItems).outerHeight());してみましたが、機能しません。

4

3 に答える 3

3

私はここに来て、同じ問題に対する同様の、しかしより一般化された解決策を探しました。ここでの解決策は役に立ちませんでしたが、私は自分でそれを理解し、それを共有することが役立つかもしれないと思いました。

2つの並べ替え可能なリストを修正したくはありませんでした。ただ、同じ高さを維持したかっただけです。多数のアイテムを扱う場合、リストの周りに動的なサイズのボックスが2つあると、一方のボックスがもう一方のボックスよりもはるかに小さいため、操作が難しくなる可能性があります。両方のボックスを固定の高さにすることも最適ではありません。1つのリスト内のアイテムの数がその高さを超えると、スクロールバーが表示されるためです。JQueryの並べ替え可能なconnectWithコードの組み込み機能を使用して、両方のボックスを動的に拡張する必要がありましたが、両方を2つのうち大きい方に設定することも必要でした。これを行うために、リストのパディングを変更でき、その領域はドラッグアンドドロップの目的で引き続き対話可能な領域であることがわかりました。

したがって、2つのconnectWithを作成するには、並べ替え可能なリストで同じ高さを維持するために、overイベントに次のハンドラーを追加できます。

        over: function(event, ui) {
           var heightDiff = $("#sourceItems").height() - $("#targetItems").height();
           $("#sourceItems").css('padding-bottom', (Math.abs(heightDiff) - heightDiff) / 2 + 'px');
           $("#targetItems").css('padding-bottom', (Math.abs(heightDiff) + heightDiff) / 2 + 'px');
        }

これは、このイベントハンドラーを使用して他の例を拡張したフィドルの例です：http：//jsfiddle.net/TLrn7/

于 2014-02-14T20:12:34.947 に答える
2

編集： 

$(document).ready(function(){
    $("#targetItems").height($("#sourceItems").height());
    $("#sourceItems").height($("#sourceItems").height());
});

http://jsfiddle.net/JEY4U/1/

古い答え：

ドラッグされた要素が適切な幅と高さを持っていることを確認する「ヘルパー」関数を使用します。
このようなもの：

helper: function(event, ui) {
    $(ui).width($(ui).width());
    $(ui).height($(ui).height());
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
}

次のように使用します。

$(SOME_OBJECT).sortable({
    connectWith: ...,
    placeholder: ...,
    ......
    helper: function....
});

もちろん、好きなコスチュームヘルパー関数を書くことができます。

于 2012-06-22T15:20:02.767 に答える
0

jQuery UIリストの高さは、CSSを使用して特定の高さに設定されます。300pxの高さの例。

.ui-autocomplete {
  max-height: 300px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
}
/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
  height: 300px;
}

こちらのドキュメントをお読みください：https ：//jqueryui.com/autocomplete/#maxheight

于 2015-09-21T14:05:51.400 に答える