无需ID实现多同class拖放Div的图片拖放功能

没问题，这事儿完全可以实现！你只需要把原来针对单个ID的绑定逻辑改成批量处理所有.drop元素就行，彻底摆脱对ID的依赖，完美适配PHP动态生成的场景。

修改后的完整代码 #

JavaScript

$(function() {
  var $dragElem = $(".drag"),
      $dropZones = $(".drop");

  $dragElem.draggable({
    revert: "invalid",
    helper: "clone",
    cursor: "move"
  });

  // 批量给所有.drop元素绑定droppable逻辑
  $dropZones.droppable({
    accept: $dragElem,
    drop: function(event, ui) {
      console.log("拖放到了:", this); // 当前拖放区域元素
      deleteImage(ui.draggable, $(this));
      $(this).droppable("disable");
    }
  });

  function deleteImage($item, $dropZone) {
    $item.fadeOut(function() {
      $item.appendTo($dropZone).fadeIn();
    });
  }
});

CSS（无需改动，可加margin优化显示）

.drop {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  margin: 10px 0; /* 加个间距方便区分多个拖放区域 */
}

HTML（移除所有拖放区域的ID）

<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <!-- 动态生成的拖放区域，只保留class即可 -->
  <div class="drop"></div>
  <div class="drop"></div>
  <!-- 哪怕PHP生成100个.drop元素，逻辑也会自动生效 -->
  <div class="drop"></div>

  <div>
    <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
    <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
  </div>
</body>

关键改动说明 #

• 批量绑定逻辑：直接通过.drop选择器选中所有拖放区域，一次性绑定droppable配置，不需要为每个区域重复写相同代码
• 利用this关键字：在drop回调函数里，$(this)就是当前接收拖拽元素的那个拖放区域，完全不需要通过ID定位
• 动态场景适配：不管PHP生成多少个.drop元素，只要class正确，拖放逻辑都会自动生效，彻底避免了生成随机ID的麻烦

这样修改后，你的需求就完全满足啦，既不用ID，又能完美支持动态生成的拖放区域。

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