0

通过从一个 ul 拖动到另一个 ul 来添加 li

例如

第一个 ul清单项目：

  • 1
  • 2
  • 3
  • 4

第二个 ul列表项：空

当 itema被拖放到 secondul时，必须将 item 添加到 secondul中。

限制第二项添加超过 2 项ul。

我使用了 jquery.ui 的Sortable Widget (Categories: Interactions)

但不能实施添加不超过2 li 项的限制。

请帮我..

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/

它只是计算在“接收”事件中传输了多少项目，并且当两个项目被丢弃时，connectWith 属性被设置，并且第一个 ul.li 不可丢弃到第二个 ul

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