通過使用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

回答

相關問題