Question

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

e.g。

第一个 ul列表项：

1
2
3
4

第二个 ul个列表项：为空

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

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

我使用了来自jquery.ui的Sortable Widget（类别：交互）

但是不能实施添加不超过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");
        });
    });

Answer 1

希望这个小提琴可能有帮助，从你提到的jquery例子，

http://jsfiddle.net/T3n4u/

它只计算在“receive”事件中传输的项目数，并且当两个项目被删除时，connectWith属性被设置，并且第一个ul.li不能被删除到第二个ul

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

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

1 个答案: