1

これが私が達成しようとしていることです-ソート可能なリスト（）内に7つのリスト項目があり#sortable2、空のソート可能なリスト（#sortable1）にドラッグアンドドロップしています。

#sortable1新しい並べ替え可能なリスト（ ）にある要素の数を数え、ユーザーに現在のアイテム数を知らせるアラートを表示したいと思います。アイテムが削除されても、これを機能させたいです。

これが私のHTMLです：

    <ul id="sortable2" class="dropfalse">
       <li id="1">Section 1</li>
       <li id="2">Section 2</li>
       <li id="3">Section 3</li>
       <li id="4">Section 4</li>
       <li id="5">Section 5</li>
       <li id="6">Section 6</li>
       <li id="7">Section 7</li>
    </ul>

    <ul id="sortable1" class="droptrue">

</ul>

そしてjQuery：

    $("#sortable1 li").each(function() {
        var elem = $(this);

        // I have just added one example here (if two added) for brevity

        if (elem.children("li").length = 2) {
            alert('There are two elements');
        }
});
4

3 に答える 3

1

ドロップ可能なイベントでこれを実行する必要がありますdrop-jQueryUIドロップ可能であると仮定すると、次のようなものが機能します：

$('#sortable1').droppable({
    drop: function(event, ui) {
        var liCount = $("#sortable1 li").length;
        // do something with liCount...
    }
});
于 2013-01-30T10:44:27.570 に答える
0

2つの主な問題は次のとおりです。

要素の数を数えるときに方程式の代わりに代入を使用する

ul 要素の代わりに li 要素の子をカウントする正しいコード:

$("#sortable1").each(function() {
        var elem = $(this);

        // I have just added one example here (if two added) for brevity

        if (elem.children("li").length == 2) {
            alert('There are two elements');
        }
});
于 2013-01-30T10:45:13.287 に答える
0

Sortable APIreceiveで説明されているように、およびremoveイベントを使用する必要があります。

これはjsfiddleでの実際の例であり、これがサンプルコードです:

function addRemoveHandler(event, ui) {
    alert("Number of items in sortable1: " + $(this).find("li").length);
}

$( "#sortable2" ).sortable({
    connectWith: "ul"
});
$( "#sortable1" ).sortable({
    connectWith: "ul",
    receive: addRemoveHandler,
    remove: addRemoveHandler
});
于 2013-01-30T10:59:01.173 に答える