如何使用jQuery UI Droppable实现拖放并排除指定子元素？

嘿，我来帮你搞定这个jQuery UI拖放的排除需求！核心思路就是利用Droppable的事件回调，精准判断当前鼠标指向的子元素是否为排除区域，从而控制放置权限。下面是完整的可运行方案：

1. 先搭好HTML结构 #

我们先定义拖拽元素和包含排除区域的放置容器，给排除的容器加个ID方便后续定位：

<div id="draggable">我是可拖拽的元素</div>

<div id="dropZone">
  <div class="allowed-box">允许放置的容器1</div>
  <div class="allowed-box">允许放置的容器2</div>
  <div id="exclude-box">exclude this container</div>
</div>

2. 加些样式让区域更直观（可选） #

给不同区域加个样式，用户一眼就能区分哪些能放、哪些不能放：

#draggable {
  padding: 12px;
  background: #e3f2fd;
  border: 1px solid #2196f3;
  cursor: move;
  width: 150px;
  margin-bottom: 20px;
}

#dropZone {
  padding: 20px;
  border: 2px dashed #ccc;
  width: 300px;
}

#dropZone > div {
  padding: 10px;
  margin: 10px 0;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

#exclude-box {
  background-color: #ffebee;
  border-color: #ef5350;
}

.no-drop {
  cursor: no-drop !important;
  opacity: 0.7;
}

3. 核心JavaScript逻辑 #

这里是关键，我们通过Droppable的over、drop等事件来动态控制放置权限：

$(function() {
  // 初始化拖拽元素，设置放置失败时返回原位置
  $("#draggable").draggable({
    revert: function(isValid) {
      return !isValid; // 如果放置无效，就返回原位置
    }
  });

  // 初始化放置区域
  $("#dropZone").droppable({
    tolerance: "pointer", // 只有鼠标指针在元素内才触发事件，判断更精准
    over: function(event, ui) {
      const currentTarget = $(event.target);
      // 检查当前鼠标是不是指在排除容器上
      if (currentTarget.is("#exclude-box")) {
        // 临时设置不允许放置，加上提示样式
        $(this).droppable("option", "accept", false);
        currentTarget.addClass("no-drop");
      } else {
        // 恢复允许放置，移除提示样式
        $(this).droppable("option", "accept", true);
        $("#exclude-box").removeClass("no-drop");
      }
    },
    out: function() {
      // 离开放置区域时，重置所有状态
      $(this).droppable("option", "accept", true);
      $("#exclude-box").removeClass("no-drop");
    },
    drop: function(event, ui) {
      const currentTarget = $(event.target);
      // 最后再校验一次，确保不是在排除区域放置
      if (!currentTarget.is("#exclude-box")) {
        // 把拖拽元素放到目标容器里，重置位置避免偏移
        ui.draggable.appendTo(currentTarget).css({ top: 0, left: 0 });
        console.log("放置成功啦！");
      } else {
        console.log("哦，这个区域不能放哦～");
      }
    }
  });
});

为啥这么做？给你拆解关键要点 #

• tolerance: "pointer"：这个选项是为了精准判断鼠标当前指向的子元素，不然如果用默认的intersect，可能会误判成整个dropZone，没法区分子元素。
• revert回调：让拖拽元素在放置失败时自动回到原位置，用户体验更好，不用手动拖回去。
• 动态切换accept选项：在鼠标进入排除区域时，临时设置accept: false，这样Droppable就不会接受拖拽元素；离开时再恢复。
• 视觉提示：通过no-drop类给禁止区域加个禁止光标和半透明效果，用户一眼就懂哪里不能放。

这样就能完美实现你的需求：整个#dropZone是放置区域，但里面的#exclude-box子元素完全不允许放置拖拽对象。

内容的提问来源于stack exchange，提问作者ITS