通过从一个ul拖到另一个ul来添加li
e.g。
第一个 ul
列表项:
第二个 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");
});
});
答案 0 :(得分:2)
希望这个小提琴可能有帮助,从你提到的jquery例子,
它只计算在“receive”事件中传输的项目数,并且当两个项目被删除时,connectWith属性被设置,并且第一个ul.li不能被删除到第二个ul
receive: function(event, ui){
if(++count > 1)
$("#sortable1").sortable("option", { connectWith: "" });
}