如何使用JavaScript实现禁止向已有可拖动<img>的Div中再拖入新的可拖动<img>？

嘿，我帮你搞定这个拖拽限制的问题！要实现每个Div只能放入一个可拖动<img>的需求，我们只需要在drop函数里添加一个简单的检查逻辑——在添加新图片前，先判断目标Div里是否已经存在符合条件的图片元素。

修改后的完整代码： #

function allowDrop(ev) { 
  ev.preventDefault(); 
}

function drag(ev) { 
  ev.dataTransfer.setData("text", ev.target.id); 
}

function drop(ev) { 
  ev.preventDefault(); 
  // 获取目标容器（如果用户拖到Div内的子元素，确保拿到父Div）
  const targetContainer = ev.target.tagName === 'DIV' ? ev.target : ev.target.closest('div');
  // 检查容器内是否已有可拖动的img元素
  const hasDraggableImg = targetContainer.querySelector('img[draggable="true"]') !== null;
  
  if (!hasDraggableImg) {
    var data = ev.dataTransfer.getData("text"); 
    targetContainer.appendChild(document.getElementById(data)); 
  }
}

关键说明： #

• 目标容器修正：添加了closest('div')的判断，避免用户不小心拖到Div内的其他子元素（比如已经存在的图片）时，把新图片放到错误的位置。
• 存在性检查：通过querySelector('img[draggable="true"]')查找容器内是否已有可拖动的图片（如果你的图片默认都是可拖动的，也可以简化为querySelector('img')，但加上属性判断更精准）。
• 条件执行：只有当容器内没有符合条件的图片时，才执行添加操作，完美实现“一个Div仅存一张可拖动图片”的需求。

如果需要针对特定类名的Div做限制，只需要把closest('div')改成closest('.your-div-class')即可，灵活性拉满~

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