Javascript HTML5拖放-如果容器已经有子容器，则防止拖放

我正在尝试用HTML5拖放制作一个小的图片游戏，但是我正在忍受物品消失的痛苦

如果一个目标div中已经有一个子项，并且我不小心将一个可拖动项放到它上面，那么该可拖动项将消失。我加了一行

如果ev.target.hasChildNodes{return；}

正如之前关于这个问题的海报所建议的，但这似乎只对底部的图片源行起作用，这意味着你永远不能将一些有用的东西拖回它。我想停止的只是多个项目占用了顶部div中的一个空间

有什么有用的指导吗

我的HTML

函数allowDropev { 防止违约； } 函数dragev { ev.dataTransfer.setDatacontent，ev.target.id； } 函数dropev { 防止违约； 如果ev.target.hasChildNodes{return；} var image=ev.dataTransfer.getDatacontent； 如果ev.target.id==document.getElementByIdimage.getAttribute'data-div'{ ev.target.appendChilddocument.getElementByIdimage； } 否则{ ev.target.appendChilddocument.getElementByIdimage； } } .立方容器{ 高度：450px； 宽度：110px； } .立方接收器{ 高度：210px； 宽度：210px； } 第一组{ 宽度：100px； 高度：100px； 填充：0px； 边框：1px实心AAAAA； 浮动：左； } 第二组{ 宽度：100px； 高度：100px； 填充：0px； 边框：1px实心AAAAA； 浮动：左； } 第三组{ 宽度：100px； 高度：100px； 填充：0px； 边框：1px实心AAAAA； 浮动：左； } 第四组{ 宽度：100px； 高度：100px； 填充：0px； 边框：1px实心AAAAA； 浮动：左； } 第五组{ 宽度：100px； 高度：100px； 填充：0px； 边框：1px实心AAAAA； 浮动：左； } 第六组{ 宽度：100px； 高度：100px； 填充：0px； 边框：1px实心AAAAA； 浮动：左； } 第7课{ 宽度：100px； 高度：100px； 填充：0px； 边框：1px实心AAAAA； 浮动：左； } 第8课{ 宽度：100px； 高度：100px； 填充：0px； 边框：1px实心AAAAA； 浮动：左； } 突出显示{ 背景颜色：蓝色； } 绘图结果{ 背景色：FF0004； 宽度：20px； 高度：20px； 边框：1px实心AAAAA； } 拖拽2结果{ 背景色：FF0004； 宽度：20px； 高度：20px； 边框：1px实心AAAAA； } 绘图结果{ 背景色：FF0004； 宽度：20px； 高度：20px； 边框：1px实心AAAAA； } Drag4结果{ 背景色：FF0004； 宽度：20px； 高度：20px； 边框：1px实心AAAAA； } 改变

if (ev.target.hasChildNodes()) { return; }

到

因为当你检查ev.target时，ev.target等于IMG标签而不是DIV标签

if (ev.target.tagName=="IMG") { return; }