限制容器内可拖放项目的数量

Limit number of droppable dragged items inside a container

本文关键字：项目 拖放      更新时间：2023-09-26

我找到了这段代码，并链接了它。

这是接近我正在寻找的，但是我想添加一个计数器，因为我希望列表2和列表3只接受3个可拖动的项目。

为了我的目的，我打算在这段代码中添加更多的列表，它们也只需要接受3个项目。

List 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>

为每个可拉列表添加了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>

相关文章：