Javascript 拖放的项目在拖放时消失

我有一张可拖动的图片和两个div作为下降目标。您应该在这两个div之间来回拖动项目。 我在div中也有一个文本，我想在项目掉到div上时将其消失（从div拖动时可能再次出现）

我正在使用它，它使文本消失，但问题是照片也消失了，不能再拖动

有人能看出问题出在哪里吗？ 谢谢

功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
如果（ev.target.id==0）{
document.getElementById（'0'）。textContent=''；
}else if（ev.target.id==1）{
document.getElementById（'1'）。textContent=''；
}
}

拖放区
拖放区域

发生这种情况的原因是，当您设置textContent属性时，所有子节点都将被删除并替换为包含指定字符串的单个文本节点。因此，您将用新文本/空字符串替换掉的img

清除文本后追加图像

.dropdiv{
宽度：100px；
高度：100px；
边框：1px实心#000；
浮动：左；
利润率：20px；
}
img{
边框：1px实心#000；
}

拖放区域1
拖放区域2
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
如果（ev.target.id='drop0'）{
document.getElementById（'drop0'）。innerText=“”；
}否则如果（ev.target.id=='drop1'）{
document.getElementById（'drop1'）。innerText=“”；
}
document.getElementById（data.style.border='none'；
ev.target.appendChild（document.getElementById（数据））；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能allowDrop（ev）{
ev.preventDefault（）；
}

之所以发生这种情况，是因为在设置textContent属性时，所有子节点都将被删除，并替换为包含指定字符串的单个文本节点。因此，您将用新文本/空字符串替换掉的img

清除文本后追加图像

.dropdiv{
宽度：100px；
高度：100px；
边框：1px实心#000；
浮动：左；
利润率：20px；
}
img{
边框：1px实心#000；
}

拖放区域1
拖放区域2
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
如果（ev.target.id='drop0'）{
document.getElementById（'drop0'）。innerText=“”；
}否则如果（ev.target.id=='drop1'）{
document.getElementById（'drop1'）。innerText=“”；
}
document.getElementById（data.style.border='none'；
ev.target.appendChild（document.getElementById（数据））；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能allowDrop（ev）{
ev.preventDefault（）；
}

您的代码正在删除放置后的项目

在if语句之后调用appendchild方法

功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
如果（ev.target.id==0）{
document.getElementById（'0'）。textContent=''；
document.getElementById（'1'）。textContent='some text'
}else if（ev.target.id==1）{
document.getElementById（'0'）。textContent='some other text'；
document.getElementById（'1'）。textContent=''；
}
ev.target.appendChild（document.getElementById（数据））；
}

您的代码正在删除放置后的项目

在if语句之后调用appendchild方法

功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
如果（ev.target.id==0）{
document.getElementById（'0'）。textContent=''；
document.getElementById（'1'）。textContent='some text'
}else if（ev.target.id==1）{
document.getElementById（'0'）。textContent='some other text'；
document.getElementById（'1'）。textContent=''；
}
ev.target.appendChild（document.getElementById（数据））；
}

哇，谢谢！这很容易…但我仍然有一个问题。div是带边框的正方形，照片也是，应该适合它，但是div在放置后会改变大小，我猜是因为仍然有文本，但是隐藏了。你能提出一个解决这个问题的办法吗？我尝试将文本设置为0px大小，使其不覆盖任何空间，但这显然不是一个好方法，或者在脚本中设置div的大小，但也不是这样。您可以通过执行以下操作删除div边框：document.getElementById（“0”）.style.border=“none”；图片的边框将取而代之。但我需要边框在那里检查drop div中是否有填充。请您为代码创建一个提琴。这将有助于识别实际错误。@chaturanga我没有看到任何大小问题，您还没有发布该问题的工作片段。以我的代码为例。哇，谢谢！这很容易…但我仍然有一个问题。div是带边框的正方形，照片也是，应该适合它，但是div在放置后会改变大小，我猜是因为仍然有文本，但是隐藏了。你能提出一个解决这个问题的办法吗？我尝试将文本设置为0px大小，使其不覆盖任何空间，但这显然不是一个好方法，或者在脚本中设置div的大小，但也不是这样。您可以通过执行以下操作删除div边框：document.getElementById（“0”）.style.border=“none”；图片的边框将取而代之。但我需要边框在那里检查drop div中是否有填充。请您为代码创建一个提琴。这将有助于识别实际错误。@chaturanga我没有看到任何大小问题，您还没有发布该问题的工作片段。以我的代码为例。