コンテナ内のドロップ可能なドラッグされたアイテムの数の制限

Question

これは、codeと、リンクされたfiddleです。

これは私が探しているものに近いですが、リスト2とリスト3に3つのドラッグ可能なアイテムしか受け付けないようにしたいのでカウンターを追加したいと思います。

私はこのコードに私の目的のためにリストを追加するつもりであり、また3つのアイテムしか受け入れる必要がありません。

リスト1は、すべてのドラッグ可能なアイテムを受け入れる必要があります。

私はこのすべてを追跡するためにカウンタを持つ配列を作成する必要があると思いますが、その方法はわかりません。私は本当に理解していないか、JavaScriptを知っていない。

これについてのお手伝いをいただければ幸いです。

$(document).ready(function(){ 
     $(".droppable").droppable({ 
      drop: function(event, ui) { 
       var $list = $(this); 
       $helper = ui.helper; 
       $($helper).removeClass("selected"); 
       var $selected = $(".selected");     
       if($selected.length > 1){      
        moveSelected($list,$selected); 
       }else{ 
        moveItem(ui.draggable,$list); 
       }          
      }, tolerance: "touch" 
     }); 

     $(".draggable").draggable({ 
      revert: "invalid", 
      helper: "clone", 
      cursor: "move", 
      drag: function(event,ui){ 
       var $helper = ui.helper; 
       $($helper).removeClass("selected"); 
       var $selected = $(".selected"); 
       if($selected.length > 1){ 
        $($helper).html($selected.length + " items"); 
       }          
      } 
     }); 

     function moveSelected($list,$selected){ 
      $($selected).each(function(){ 
       $(this).fadeOut(function(){ 
         $(this).appendTo($list).removeClass("selected").fadeIn(); 
       });     
      });    
     } 

     function moveItem($item,$list) { 
      $item.fadeOut(function() { 
       $item.find(".item").remove(); 
       $item.appendTo($list).fadeIn(); 
      }); 
     } 

     $(".item").click(function(){ 
      $(this).toggleClass("selected"); 
     }); 

    }); 

HTML ...、

<div id="list1" class="droppable list"><!-- I want this to accept many. --> 
     <div class="item draggable">1</div> 
     <div class="item draggable">2</div> 
     <div class="item draggable">3</div> 
     <div class="item draggable">4</div> 
    </div> 
    <div id="list2" class="droppable list"><!-- I want this to accept only 3. --> 
     <div class="item draggable">5</div> 
     <div class="item draggable">6</div> 
    </div> 
    <div id="list3" class="droppable list"><!-- I want this to accept only 3. --> 
     <div class="item draggable">7</div> 
    </div> 

Answer 1

は、各ドロップ可能なリストについては、data-max属性が追加されましたし、そのリスト内の要素の数がmax（上限）に達した場合drop関数の内部で、あなたは確認することができますもしそうなら、falseを返します。ここで

はあなたのコードの変更です：

$(document).ready(function(){ 
 
    $(".droppable").droppable({ 
 
    drop: function(event, ui) { 
 
     var $list = $(this); 
 
     $helper = ui.helper; 
 
     
 
     // Check if we reached the maximum number of children. 
 
     if ($(this).children().length == $(this).data('max')) { 
 
     return false; 
 
     } 
 
     
 
     $($helper).removeClass("selected"); 
 
     var $selected = $(".selected");     
 
     if($selected.length > 1){      
 
     moveSelected($list,$selected); 
 
     }else{ 
 
     moveItem(ui.draggable,$list); 
 
     }          
 
    }, tolerance: "touch" 
 
    }); 
 

 
    $(".draggable").draggable({ 
 
    revert: "invalid", 
 
    helper: "clone", 
 
    cursor: "move", 
 
    drag: function(event,ui){ 
 
     var $helper = ui.helper; 
 
     $($helper).removeClass("selected"); 
 
     var $selected = $(".selected"); 
 
     if($selected.length > 1){ 
 
     $($helper).html($selected.length + " items"); 
 
     }          
 
    } 
 
    }); 
 

 
    function moveSelected($list,$selected){ 
 
    $($selected).each(function(){ 
 
     $(this).fadeOut(function(){ 
 
     $(this).appendTo($list).removeClass("selected").fadeIn(); 
 
     });     
 
    });    
 
    } 
 

 
    function moveItem($item,$list) { 
 
    $item.fadeOut(function() { 
 
     $item.find(".item").remove(); 
 
     $item.appendTo($list).fadeIn(); 
 
    }); 
 
    } 
 

 
    $(".item").click(function(){ 
 
    $(this).toggleClass("selected"); 
 
    }); 
 

 
});

div.list { 
 
    border: 1px solid red; 
 
    margin: 5px; 
 
    min-height: 20px; 
 
} 
 
div.list div { 
 
    background: gray; 
 
    margin: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div id="list1" class="droppable list" data-max="-1"><!-- I want this to accept many. --> 
 
    <div class="item draggable">1</div> 
 
    <div class="item draggable">2</div> 
 
    <div class="item draggable">3</div> 
 
    <div class="item draggable">4</div> 
 
</div> 
 
<div id="list2" class="droppable list" data-max="3"><!-- I want this to accept only 3. --> 
 
    <div class="item draggable">5</div> 
 
    <div class="item draggable">6</div> 
 
</div> 
 
<div id="list3" class="droppable list" data-max="3"><!-- I want this to accept only 3. --> 
 
    <div class="item draggable">7</div> 
 
</div>