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

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

例如，

首先ul列表项：

二ul列表项：EMP TY

当项目a拖放到第二ul的项目必须添加到第二ul。

在第二个ul中限制添加超过2个项目。

我已经使用Sortable Widget（类别：互动）从jquery.ui

但无法实现增加不超过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"); 
     }); 
    });

来源

2012-11-21 Jitendra

你的代码，好吗？ – Blazemonger

http://www.whathaveyoutried.com？ –

希望这小提琴也许会有帮助，你所提到jQuery的例子，

http://jsfiddle.net/T3n4u/

它只是c ounts多少项目在“接收”事件被转移，而当两个项目都将被丢弃的connectWith属性设置，并且第一ul.li不是投掷的第二UL

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

来源

2012-11-21 21:05:14 shakib

谢谢.. 现在我尝试使用droppable和Draggable 我有问题即我想用丢弃的项目替换拖动的项目当第二个ul有最大数量时 – Jitendra

你可以用你的html和javascript创建一个小提琴吗？ – shakib

http://jsfiddle.net/veerjiten/MtJth/1/ – Jitendra

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

回答

相关问题