0

ある ul から別の ul にドラッグして li を追加する

例えば

最初 ulのリスト項目:

  • 1
  • 2
  • 3
  • 4

2 番目 ulのリスト項目:空

アイテムを秒にaドラッグ アンド ドロップするとul、アイテムを秒に追加する必要がありますul。

2 番目に 2 つ以上の項目の追加を制限しulます。

jquery.ui の Sortable Widget (Categories: Interactions) を使用しました

ただし、li 項目を 2 つまで追加するという制限を実装することはできません。

私を助けてください..

DndOptionDiv は最初のダイブで、オプションがあります - 1 - 2 - 3 - 4 sortable1 ul 2 DndFirstAns および DndSecondAns ul からオプションを追加しようとしています

CSS

    .connectedSortable {
        background-color: seagreen;
        width: 150px;
    }
    .DndOptionDivCss {
        width:150px;
        float:left;

    }

    .DndFirstAnsDiv {
        width:150px;
        float:left;

    }

    .DndSecondAnsDiv {
        width:150px;
        float:left;

    }
    ul {
        border:dashed;
        border-width:1px;
    }

aspx コード---

 <div d="DndOptionDiv" class="DndOptionDivCss">
            <ul id="sortable1" >
                <li id="1" >1 </li>
                <li id="2" >2</li>
                <li id="3" >3</li>
                <li id="4" >4</li>
            </ul>
        </div>
        <div id="DndFirstAnsDiv" class="DndFirstAnsDiv">
            <ul id="DndFirstAns" >
                <li class="ui-draggable" >1st ans</li>
            </ul>
        </div>
        <div id="DndSecondAnsDiv" class="DndSecondAnsDiv">
            <ul id="DndSecondAns" >
                <li class="ui-draggable">2nd Ans</li>

        </div>

このためのスクリプトは

$(function () {
        $("#sortable1 li").draggable({
            revert: true,
            stop: function (event, ui) {
                $(ui.draggable).remove();
            }
        });


        $("#DndFirstAns").droppable({
            drop: function (event, ui) {
                $(this).find("p").html("Dropped!");//$(this).addClass("ui-state-highlight").find("p").html("Dropped!");
                toDrop = $(ui.draggable);
                //if ($("#queAnsOptions1").find("li[uniqueIdentity=" + toDrop.attr("uniqueIdentity") + "]").length <= 0)//for uniqueId
                //{

                $("#DndFirstAns").append(toDrop);
                //$(ui.draggable).remove();
                //}

            },

        });

        $("#DndSecondAns").droppable({
            drop: function (event, ui) {
                $(this).find("p").html("Dropped!");//$(this).addClass("ui-state-highlight").find("p").html("Dropped!");
                toDrop = $(ui.draggable);
                //if ($("#queAnsOptions1").find("li[uniqueIdentity=" + toDrop.attr("uniqueIdentity") + "]").length <= 0)//for uniqueId
                //{

                $("#DndSecondAns").append(toDrop);
                //$(ui.draggable).remove();
                //}

            },

        });
        $("#DndFirstAns li").click(function () {
            $(this).appendTo("#sortable1");
        });
        $("#DndSecondAns li").click(function () {
            $(this).appendTo("#sortable1");
        });
    });
4

1 に答える 1

4

あなたが言及したjqueryの例から、このフィドルが役立つことを願っています。

http://jsfiddle.net/T3n4u/

「受信」イベントで転送されたアイテムの数を単純にカウントし、2 つのアイテムがドロップされると connectWith プロパティが設定され、最初の ul.li は 2 番目の ul にドロップできません。

receive: function(event, ui){
        if(++count > 1)
            $("#sortable1").sortable("option", { connectWith: "" });
    }
于 2012-11-21T21:05:14.000 に答える