如何将图片以[object HTMLImageElement]放入div？拖拽限制实现求助

嘿，我理解你想通过在禁止拖放的div里嵌入图片来区分可拖放/不可拖放区域的思路，不过先聊聊现有代码里的几个小问题，再给你更可靠的实现方案：

你当前用ev.target=="[object HTMLDivElement]"来判断目标元素的方式非常脆弱——不同浏览器环境下元素的toString结果可能有差异，而且如果拖放到div内的子元素上，ev.target会变成子元素而非div本身，直接导致允许拖放的区域也失效。

如果你坚持想用占位图片来区分区域，可以按下面的方式优化：

1. 调整拖放脚本逻辑 #

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

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

function drop(ev) {
  ev.preventDefault();
  // 向上遍历找到目标div（避免拖放到子元素时判断失效）
  let targetDiv = ev.target;
  while(targetDiv && !(targetDiv instanceof HTMLDivElement)) {
    targetDiv = targetDiv.parentElement;
  }
  if(!targetDiv) return;

  // 判断当前div是否包含禁止拖放的占位图片
  const hasForbiddenImg = targetDiv.querySelector('.drop-block-placeholder') !== null;
  if(!hasForbiddenImg) {
    const data = ev.dataTransfer.getData("text");
    targetDiv.appendChild(document.getElementById(data));
  }
}

2. 设置HTML结构 #

给禁止拖放的div插入占位图片，同时所有div都要绑定ondragover（否则拖放时会直接显示禁止光标，体验不友好）：

<!-- 允许拖放的div -->
<div ondrop="drop(event)" ondragover="allowDrop(event)" class="drop-allowed"></div>

<!-- 禁止拖放的div -->
<div ondragover="allowDrop(event)" class="drop-forbidden">
  <img src="你的占位图路径" alt="禁止拖放" class="drop-block-placeholder" />
</div>

其实不需要额外插入占位图片，用自定义属性标记可拖放区域的逻辑更清晰，维护也更方便：

1. 调整HTML结构 #

用data-allow-drop属性明确标记区域权限：

<!-- 允许拖放的div -->
<div ondrop="drop(event)" ondragover="allowDrop(event)" data-allow-drop="true"></div>

<!-- 禁止拖放的div -->
<div ondragover="allowDrop(event)" data-allow-drop="false"></div>

2. 优化拖放脚本 #

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

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  // 设置拖放效果，让用户直观感知状态
  ev.dataTransfer.effectAllowed = 'copy';
}

function drop(ev) {
  ev.preventDefault();
  // 向上遍历找到目标div
  let targetDiv = ev.target;
  while(targetDiv && !(targetDiv instanceof HTMLDivElement)) {
    targetDiv = targetDiv.parentElement;
  }
  if(!targetDiv) return;

  // 通过自定义属性判断是否允许拖放
  const isAllowDrop = targetDiv.dataset.allowDrop === 'true';
  if(isAllowDrop) {
    const data = ev.dataTransfer.getData("text");
    targetDiv.appendChild(document.getElementById(data));
  } else {
    // 可选：给用户提示禁止拖放
    alert('此区域不允许拖放图片');
  }
}

如果想用背景图作为禁止区域的视觉提示，只需要给禁止拖放的div加个自定义类（比如drop-forbidden），然后通过CSS设置背景图即可，完全不影响拖放逻辑的判断。

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