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

Question

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

例如

前ul列表项：

• 1
• 阿拉伯数字
• 3
• 四

第二个ul列表项：空

当项目a拖放到第二个ul时，必须将该项目添加到第二个ul。

限制在第二个ul中添加 2 个以上的项目。

我使用了jquery.ui的可排序小部件（类别：交互）

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

请帮助我..

DndOptionDiv 是第一次潜水有选项 - 1 - 2 - 3 - 4 我正在尝试从可排序1 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");
        });
    });

Answer 1

希望这个小提琴可能会有所帮助，从你提到的 jquery 示例中，

http://jsfiddle.net/T3n4u/

它只是计算在"接收"事件中传输了多少个项目，当两个项目被删除时，将设置connectWith 属性，并且第一个 ul.li 不能删除到第二个 ul

receive: function(event, ui){
        if(++count > 1)
            $("#sortable1").sortable("option", { connectWith: "" });
    }