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

为每个可放置列表添加了let menuVC : MenuViewController = self.storyboard!.instantiateViewController(withIdentifier: "MenuViewController") as! MenuViewController menuVC.delegate = self self.view.addSubview(menuVC.view) self.addChildViewController(menuVC) menuVC.didMove(toParentViewController: self) menuVC.view.layoutIfNeeded() menuVC.view.frame=CGRect(x: 0 - UIScreen.main.bounds.size.width, y: 0, width: self.view.frame.width, height: self.view.frame.height); UIView.animate(withDuration: 0.3, animations: { () -> Void in menuVC.view.frame = self.view.frame sender.isEnabled = true }, completion:nil)属性，在data-max函数内，您可以检查该列表中的元素数是否达到drop（限制），如果是 - 只是返回false。

以下是对代码的更改：

max

$(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;
}

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

1 个答案: