如何取消 jquery ui 中的掉落事件？

Question

这是我的 JSFiddle 我只想从每个组（水果、名人、手机）中拖一个项目到任何一个步骤。我试过不允许使用 return false，但 return false 似乎不起作用。请帮助我不要将每个组中的多个元素拖放到任何规则中。

我最多只能添加 3 个项目到任何组。

这是我编写的示例代码，用于在组已存在时不删除元素。

$("#Rule1List,#Rule2List,#Rule3List").on("drop",function  (element,ui) {

    $("#Rule1List>li,#Rule2List>li,#Rule3List>li").each(function  (index) {
      if($(this).eq(index).hasClass($(ui.draggable).attr('class')))
      {
        console.log($(ui));
        return false;
      }
    });

  });

Answer 1

好吧，我不会给你解决这个问题的代码，但一个建议可能对你有益

在拖动任何组中的任何项目时，只需获取该特定组中项目的大小，即项目的长度。例如在 phone 组中你有 4 个项目。所以拖动项目将这个大小存储在一个变量中。 on drop 从项目组中删除该特定项目。并检查项目组的当前长度是否小于先前存储的大小，而不是从该特定项目组

中删除可拖动的 class 和事件

如何取消 jquery ui 中的掉落事件？

how to cancel drop event in jquery ui?

javascript

jquery

html

jquery-ui