拖拽图片位置记录表格生成及单图禁用重复拖拽功能咨询

没问题，这两个需求都完全可以实现，我来给你拆解下具体的思路和可落地的实现方式：

1. 生成记录拖拽目标位置的表格 #

这个核心是监听拖拽事件并同步更新表格数据，具体步骤如下：

• 先给每个可拖拽的图片标记唯一标识（比如你提到的a），同时给1-24号位置容器分别标记对应的位置编号。
• 重点监听三个拖拽关键事件：dragstart（记录当前被拖拽的图片标识）、dragover（允许目标位置接收拖拽元素）、drop（确定最终的目标位置编号）。
• 当拖拽完成后，把(目标位置编号, 图片标识)的对应关系更新到表格中，同时可以清空原位置的记录（根据需求可选）。

举个简单的代码示例：

<!-- 1-24号位置容器 -->
<div class="position" data-position="12">
  <img src="red.png" class="draggable-img" data-img-id="a" draggable="true">
</div>
<div class="position" data-position="11"></div>

<!-- 拖拽记录表格 -->
<table id="drag-record">
  <thead>
    <tr><th>位置编号</th><th>图片标识</th></tr>
  </thead>
  <tbody>
    <tr><td>11</td><td></td></tr>
    <tr><td>12</td><td>a</td></tr>
    <!-- 其他1-24号位置行省略 -->
  </tbody>
</table>

let currentImgId = '';

// 监听拖拽开始，记录当前图片标识
document.querySelectorAll('.draggable-img').forEach(img => {
  img.addEventListener('dragstart', (e) => {
    currentImgId = e.target.dataset.imgId;
  });
});

// 监听目标位置的放置事件
document.querySelectorAll('.position').forEach(pos => {
  // 允许目标位置接收拖拽元素
  pos.addEventListener('dragover', (e) => e.preventDefault());
  
  pos.addEventListener('drop', (e) => {
    e.preventDefault();
    const targetPos = e.currentTarget.dataset.position;
    
    // 将图片移动到目标位置
    const imgEl = document.querySelector(`[data-img-id="${currentImgId}"]`);
    e.currentTarget.appendChild(imgEl);
    
    // 更新记录表格：找到目标位置对应的行，填入图片标识
    const targetRow = Array.from(document.querySelectorAll('#drag-record tbody tr'))
      .find(row => row.querySelector('td:first-child').textContent === targetPos);
    targetRow.querySelector('td:last-child').textContent = currentImgId;
    
    // 清空原位置的记录（可选）
    const originalRow = Array.from(document.querySelectorAll('#drag-record tbody tr'))
      .find(row => row.querySelector('td:last-child').textContent === currentImgId);
    if (originalRow && originalRow !== targetRow) {
      originalRow.querySelector('td:last-child').textContent = '';
    }
  });
});

2. 实现拖拽一次后图片不可再拖拽的功能 #

这个只需要在第一次拖拽完成后，移除图片的拖拽权限即可，有两种简单的实现方式：

• 方式一：在dragend事件中，直接将图片的draggable属性设为false，同时移除拖拽相关的事件监听，从根源上禁止再次拖拽。
• 方式二：给图片添加一个自定义标记（比如data-is-dragged="true"），在dragstart事件中判断这个标记，如果已拖拽过就阻止默认行为。

代码示例（基于上面的逻辑扩展）：

// 方式一：直接禁用拖拽权限
document.querySelectorAll('.draggable-img').forEach(img => {
  img.addEventListener('dragend', (e) => {
    // 禁用拖拽属性
    e.target.draggable = false;
    // 移除拖拽事件监听（可选，避免冗余触发）
    e.target.removeEventListener('dragstart', arguments.callee);
    e.target.removeEventListener('dragend', arguments.callee);
  });
});

// 方式二：通过标记判断是否允许拖拽（如果用这种，替换上面的dragstart监听逻辑）
// document.querySelectorAll('.draggable-img').forEach(img => {
//   img.addEventListener('dragstart', (e) => {
//     // 如果已经拖拽过，阻止拖拽行为
//     if (e.target.dataset.isDragged === "true") {
//       e.preventDefault();
//       return;
//     }
//     currentImgId = e.target.dataset.imgId;
//   });
  
//   img.addEventListener('dragend', (e) => {
//     // 添加已拖拽标记
//     e.target.dataset.isDragged = "true";
//   });
// });

这样就能完美实现你想要的“拖拽一次后图片不可再被拖拽”的需求了。

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