一旦丢弃的物品数量达到一定限度，就避免丢弃答案

【问题标题】：Avoid drop once that dropped items count reach some limit一旦丢弃的物品数量达到一定限度，就避免丢弃
【发布时间】：2015-06-28 23:31:05
【问题描述】：

我正在使用 Jquery UI Draggable。一旦将接收该项目的 div 达到限制，我试图避免项目被丢弃。如下所示，这是我的代码。

 $( "#grid-list" ).droppable({
        over: function(event, ui) {
          count = 0;
          $("#grid-list").find("li").each(function () {
            count++;

            if(count > $("#grid-list").data("albumlist")){
              alert("limit reached");
            }
          });
        }
      });

JS Fiddle 示例：http://jsfiddle.net/r1Lnxby9/

【问题讨论】：

标签： jquery jquery-ui-draggable

【解决方案1】：

编辑、更新

尝试从 html 中删除 ondragstart="drag(event)" ， draggable="true" ， drag 未在 js 中定义；将tolerance:"touch" 设置为.droppable() 选项；用 $("> li", this).length 替换 count ， $("#grid-list").each() ； >= for > 如果预期结果是 1 元素在 .droppable() 元素内的最大值；在 over 事件中调用 event.preventDefault() , event.stopPropagation()

  $("#list-albuns, #grid-list").sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();

  $("#grid-list").droppable({
    tolerance: "touch",
    over: function(event, ui) {
      if ($("> li", this).length >= $(this).data("albumlist")) {
        event.preventDefault();
        event.stopPropagation();
        alert("limit");
      }
    }
  });

ul li {
  display: inline-block;
  list-style: none;
}

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

<ul id="list-albuns" class="connectedSortable ui-sortable">
  <li id="0" class="ui-sortable-handle">
    <input type="hidden" name="albumId[]" value="0">
    <img id="dragimg0" height="126" width="126" src="http://userserve-ak.last.fm/serve/126/51552793.png" alt="Appetite for Destruction">
  </li>
  <li id="2" class="ui-sortable-handle">
    <input type="hidden" name="albumId[]" value="2">
    <img id="dragimg2" height="126" width="126" src="http://userserve-ak.last.fm/serve/126/97176319.png" alt="Use Your Illusion II">
  </li>
  <li id="3" class="ui-sortable-handle">
    <input type="hidden" name="albumId[]" value="3">
    <img id="dragimg3" height="126" width="126" src="http://userserve-ak.last.fm/serve/126/89710469.png" alt="40 Seasons - The Best Of Skid Row">
  </li>
  <li id="5" class="ui-sortable-handle">
    <input type="hidden" name="albumId[]" value="5">
    <img id="dragimg5" height="126" width="126" src="http://userserve-ak.last.fm/serve/126/56005467.jpg" alt="Danger Danger">
  </li>
  <li id="6" class="ui-sortable-handle">
    <input type="hidden" name="albumId[]" value="6">
    <img id="dragimg6" height="126" width="126" src="http://userserve-ak.last.fm/serve/126/85595741.jpg" alt="Screw It [Italy Bonus Tracks]">
  </li>
  <li id="7" class="ui-sortable-handle">
    <input type="hidden" name="albumId[]" value="7">
    <img id="dragimg7" height="126" width="126" src="http://userserve-ak.last.fm/serve/126/90791541.jpg" alt="Detonator">
  </li>
</ul>Drop Here:
<ul id="grid-list" data-albumlist="1" class="connectedSortable" style="width:500px; height:200px;display:block; border:2px solid black;"></ul>

jsfiddle http://jsfiddle.net/r1Lnxby9/2/

【讨论】：

感谢您的回答，其实我需要“return false”然后将物品寄回他原来的地方。我当前的代码会发出警报，但无论如何都会删除该项目。
@DênisFernandes 是的。 js at answer 尝试在 .droppable() 之外传达定义 count ，评估，在 .droppable event 处理程序处增加 count ，防止 drop 处理程序内的 drop 事件
看这个：jsfiddle.net/r1Lnxby9 那么如何防止使用事件处理程序被丢弃呢？谢谢，问候！
谢谢@guest271314，真的很有帮助！