如何限制可拖放容器仅接受一个元素并查询容器元素对应关系

1. 实现「容器接受一次元素后禁用拖放」 #

这个核心思路就是给已经放入元素的容器加个“已占用”的标记，之后在拖放过程中判断这个标记，拒绝新的元素放入。这里分两种常用的实现方式：

方式一：原生HTML5拖放API #

给容器添加一个类（比如occupied）来标记状态，在dragover和drop事件里检查这个类，存在的话就阻止放置行为：

// 给所有拖动元素绑定dragstart事件
document.querySelectorAll('.draggable-item').forEach(item => {
  item.addEventListener('dragstart', e => {
    e.dataTransfer.setData('text/plain', e.target.id); // 传递元素ID
  });
});

// 给所有容器绑定拖放相关事件
document.querySelectorAll('.drop-container').forEach(container => {
  // 允许放置
  container.addEventListener('dragover', e => {
    e.preventDefault();
    // 如果容器已被占用，直接返回，不允许放置
    if (container.classList.contains('occupied')) return;
    container.classList.add('drag-hover'); // 可选：添加 hover 样式
  });

  // 离开容器时移除hover样式
  container.addEventListener('dragleave', () => {
    container.classList.remove('drag-hover');
  });

  // 完成放置
  container.addEventListener('drop', e => {
    e.preventDefault();
    container.classList.remove('drag-hover');
    
    // 再次检查容器状态，防止重复放置
    if (container.classList.contains('occupied')) return;

    const itemId = e.dataTransfer.getData('text/plain');
    const draggedItem = document.getElementById(itemId);
    container.appendChild(draggedItem);
    container.classList.add('occupied'); // 标记容器为已占用
  });
});

方式二：jQuery UI 拖放插件 #

如果你用jQuery UI的话，实现会更简洁，利用revert选项和容器状态判断：

// 初始化可拖动元素
$('.draggable-item').draggable({
  revert: function(droppable) {
    // 如果目标容器已被占用，让元素回弹回去
    return droppable && droppable.hasClass('occupied');
  }
});

// 初始化可放置容器
$('.drop-container').droppable({
  accept: '.draggable-item',
  drop: function(event, ui) {
    if ($(this).hasClass('occupied')) return;
    ui.draggable.appendTo($(this));
    $(this).addClass('occupied'); // 标记容器为已占用
  }
});

2. 操作结束后读取每个容器对应的元素 #

有两种可靠的方法可以实现：

方法一：实时查询容器内的元素 #

直接遍历所有容器，查询里面的拖动元素就行：

function getContainerItems() {
  const result = {};
  document.querySelectorAll('.drop-container').forEach(container => {
    const item = container.querySelector('.draggable-item');
    result[container.id] = item ? item.id : '未放置元素';
  });
  console.log('容器与元素对应关系:', result);
  return result;
}

// 调用示例：比如点击按钮后读取
document.getElementById('read-btn').addEventListener('click', getContainerItems);

方法二：拖放时记录对应关系 #

在每次完成拖放时，把容器ID和元素ID存到一个全局对象里，之后直接读取这个对象即可，效率更高：

// 全局对象存储对应关系
const containerItemMap = {};

// 在drop事件里添加记录逻辑（以原生API为例）
container.addEventListener('drop', e => {
  // ... 前面的放置逻辑 ...
  containerItemMap[container.id] = draggedItem.id;
});

// 读取时直接使用这个对象
function getContainerItems() {
  console.log('容器与元素对应关系:', containerItemMap);
  return containerItemMap;
}

结合你给出的代码片段（比如用numbers数组生成卡片），只需要在生成#card元素时给它们加上draggable="true"和对应的类，再给容器加上drop-container类，就能无缝对接上面的逻辑啦。

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