javascript - 限制容器内可放置拖动项目的数量

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 属性，并且在 drop 函数内，您可以检查该列表内的元素数量是否达到 max (限制)，如果是这样 - 只需返回 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>