1

「ウィジェットスタイル」のリストセットでソート可能とドラッグ可能の組み合わせを使用しています。7つの「ターゲット」リスト(ソート可能)に接続されたドラッグ可能なリストに、「使用可能な」アイテムのリストがあります。利用可能なリストにはクローン ヘルパーがあり、利用可能なリストに常に利用可能なアイテムが入力されたままになるようにします。1 つの例外を除いて、これはすべてうまく機能します。

アイテムが使用可能な列からターゲット列にドラッグ アンド ドロップされると、その列に再びドラッグできるようにしたくありません (ただし、その列にまだ存在しないと仮定すると、他の列にドラッグできます)。

機能を示す必要がある JS Fiddle は次のとおりです: http://jsfiddle.net/Y4T32/8/

私が使用しているコードは次のとおりです。

JS:

    $( ".sph-callout-portlet" ).sortable({
        placeholder: "ui-state-highlight"
    });
    $( "#sph-callout-portlet-avail li" ).draggable({
        connectToSortable: ".sph-callout-portlet",
        helper: "clone",
        stop: function(event, ui) {
            //Other functionality here, removed for brevity
        }
    });

HTML:

<ul class="sph-callout-portlet-avail">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
<ul class="sph-callout-portlet-avail">

</ul>
<ul class="sph-callout-portlet-avail">

</ul>
<!-- Total of 7 empty lists -->
4

0 に答える 0