Jquery在达到3个元素的限制后禁用droppable答案

【问题标题】：Jquery disable a droppable after it has reached a limit of 3 elementsJquery在达到3个元素的限制后禁用droppable
【发布时间】：2016-02-10 08:59:15
【问题描述】：

我有两个可以拖放的列表框我希望我的第二个列表框只允许来自第一个列表框的 3 个列表项。我的问题是，当我达到限制时，计数器会工作，但我收到此错误：

未捕获的错误：无法在可拖动之前调用方法初始化;试图调用方法“禁用”

它允许它拖动超过 3 个元素。我希望它停在 3 个元素处，当我从第二个列表框中拖出时，它会减去计数器。

var counter = 0;

$("#listbox2").droppable({
    drop: function(event, ui) {
        if (counter <= 3) {
            counter++;
            $('#counter_text').text(counter);
        }
        if (counter === 3) {
            $('#listbox2').droppable("disable");
            $('#listbox1 li').draggable("disable");
        }
    }
})

$("#listbox1").droppable({
    drop: function(event, ui) {
        counter--;
        $('#counter_text').text(counter);

    }
})

【问题讨论】：

$('#listbox1 li').draggable("disable"); 但在您发布的代码中，您没有在任何地方初始化它

标签： javascript jquery jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

你只需要初始化可拖动元素。这是一个工作示例（样式很糟糕，顺便说一句）

var counter = 0;
$('#counter_text').text(counter);    

$('#listbox1 li').draggable({
  stop: function(event, ui) {
    $(this).css('left',0);
    $(this).css('top',0);
  }
});

$("#listbox2").droppable({
  drop: function(event, ui) {
    $(this).append(ui.draggable);
    if (counter <= 3) {
      counter++;
      $('#counter_text').text(counter);
    }
    if (counter === 3) {
      $('#listbox2').droppable("disable");
      $('#listbox1 li').draggable("disable");
    }
  },
  hoverClass: 'hover'
});

$("#listbox1").droppable({
  drop: function(event, ui) {
    counter--;
    if (counter<3) {
      $("li").draggable("enable");  
      $('#listbox2').droppable("enable");
    }
    $('#counter_text').text(counter);    
    $(this).append(ui.draggable);
    $(ui.draggable).draggable('enable');
  },
  hoverClass: 'hover'
});

ul {
  border: solid 1px green;
  padding: 5px;
  height: 120px;
}

.hover {
  background-color: #CFC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<div id="counter_text"></div>

<ul id="listbox1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

<ul id="listbox2">
</ul>

【讨论】：

当它达到其限制时，是否有办法将元素从 listbox2 返回到 listbox1，因为您可以看到有“counter --”来满足返回元素的需求。
对不起，我无法理解您的评论。无论如何，我会尝试回答：放置后，您可以更改放置对象的“可拖动性”，具体取决于父级。 IE。而不是禁用所有li 的可拖动性，仅当它们属于第一个列表时才这样做。
你还需要修改drop事件来改变li父级，像这样$(this).append(ui.draggable);
我已经对代码进行了更改，使其更加美观（在放置时将位置设置为 0,0），并在必要时启用和禁用拖放
感谢您的示例，我遇到的问题是，当我拖动 li 定位后，它位于左上角，如上所述。我希望拖动项目进入第二个列表框中使用“connectedSortable”

【解决方案2】：

检查程序的执行流程：确保在尝试对插件执行任何操作之前确实已初始化插件（例如：称为$('#listbox1 li').draggable();）。

【讨论】：

【解决方案3】：

如果你这样做，在 drop 函数内部：

 $('#list1').droppable("disable");
 $('#list2 li').draggable("disable");

你会得到：

未捕获的错误：在初始化之前无法调用可拖动的方法；试图调用方法“禁用”

我会建议你在 timout 函数中这样做：

if ($('#list1 li').length >= 3) {
        window.setTimeout(function() {
          $('#list1').droppable("disable");
          $('#list2 li').draggable("disable");
        }, 100)
        return false;
      }

工作示例here

【讨论】：