如何为MYSQL记录生成的DIV实现jQuery拖拽放置功能？

你现在代码冗余的核心问题是用唯一id逐个给元素绑定拖拽功能，完全没必要，jQuery支持通过类选择器批量匹配元素，一次初始化就能给所有符合条件的元素加上draggable能力，不管你后端根据mysql记录生成多少个div都能生效。

具体修改步骤 #

• 第一步：把head里那三十多个重复的<script>初始化块全删掉，所有js逻辑只留一个$(function() {})块包裹即可，重复写多个就绪回调只会增加无意义的代码量。
• 第二步：修正你现有代码里重复id的问题——HTML规范要求id在页面内唯一，你现在代码里已经出现了两个id为draggable的元素，本身就会导致选择器匹配异常。给所有需要拖拽的div统一加一个公共class，比如draggable-item，不需要再给每个div设置draggable1/draggable2这类递增id。
• 第三步：用类选择器一次性初始化所有拖拽元素，如果你需要实现拖拽到表格单元格的放置效果，顺便给表格td绑定droppable能力即可。

核心代码示例 #

初始化脚本（替换掉你所有重复的draggable初始化代码） #

$(function() {
  // 一行代码给所有带draggable-item类的元素绑定拖拽能力，和元素数量无关
  $(".draggable-item").draggable({
    cursor: "move",
    revert: "invalid" // 未拖到有效放置区域时自动弹回原位置，交互体验更好
  });

  // 给表格所有单元格绑定放置能力，实现拖入单元格的效果
  $("table td").droppable({
    accept: ".draggable-item",
    drop: function(event, ui) {
      // 将拖入的元素追加到当前单元格，重置定位避免偏移
      $(this).append(ui.draggable.css({
        position: "relative",
        top: 0,
        left: 0
      }));
    }
  });
});

后端循环生成DIV的写法参考 #

不管你用PHP/NodeJS还是其他后端语言循环读取mysql记录输出，每个生成的div只要带上公共类即可，不需要单独加id：

<!-- 循环输出单条记录对应的拖拽块示例 -->
<div class="ui-widget-content draggable-item" style="width: 150px; height: 51px">
  <p>这里替换成你从mysql读取的单条记录内容</p>
</div>

额外注意点 #

• 如果后续你需要在页面加载完成后，通过异步请求动态新增记录对应的拖拽块，只需要给新生成的div加上draggable-item类，再对新元素调用一次.draggable()初始化即可，不需要修改原有逻辑。
• 你原来css里写的#draggable选择器也可以改成.draggable-item，统一样式不用给每个id单独写规则。

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