HTML5 拖放 - 图像不会覆盖答案

【问题标题】：HTML5 Drag & Drop - Image won't overwriteHTML5 拖放 - 图像不会覆盖
【发布时间】：2013-10-11 14:12:02
【问题描述】：

任何人都可以帮我解决问题，感谢您的帮助！！

使用此jsfiddle更新：

代码：

<!DOCTYPE HTML>

<script>
function allowDrop(ev)
{
ev.preventDefault();
}

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

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html(new_img);
}

</script>

<body>
<center>
<p>Drag the image you want into this box!</p>

<table>
<tr>
<td><p><b>Main Image</b></p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><p><b>Image 2</b></p><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><p><b>Image 3</b></p><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
</table>

<img id="drag1" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/2013/02/thumbnail32.jpg" alt="img01"/></a>
<img id="drag2" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/html5-css3-wireframing/html5-logo.jpg" alt="img02"/></a>
<img id="drag3" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)"src="http://netdna.webdesignerdepot.com/uploads/2012/12/thumb-1.jpg" alt="img03"/></a>
</body>

<style type="text/css">
#div1 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
#div3 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
</style>

使用上面的代码，保留原始图像。但问题是，如果我将另一张图片拖到已经有图片的框中，它不会被覆盖。

【问题讨论】：

HTML5 Drag and Drop Issue的可能重复

标签： javascript jquery css html

【解决方案1】：

function allowDrop(ev)
{
ev.preventDefault();
$('#'+ev.target.id).html("");
}

【讨论】：

考虑扩大你的答案，向提问者解释为什么这会达到预期的结果，可能链接到文档。事实上，这只是微不足道的用处。
是的，我知道。但是该主题已经被同一用户复制在这里。 stackoverflow.com/questions/19315002/…

【解决方案2】：

Jsfiddle

检查小提琴...但是当您放下图像时会出现问题。您将不得不放下添加的图像和边框之间的空白区域。由于添加的图像没有分配“ondrop”属性。

function drop(ev)
{
 ev.preventDefault();
 document.getElementById(ev.target.id).innerHTML = "";
 var data=ev.dataTransfer.getData("Text");
 var new_img = $('#'+data).clone();
 $('#'+ev.target.id).html(new_img);
}

但是，如果你在allowDrop中清除了innerHTML，即使用户实际上并没有将图像放到该区域中，它也会导致droppable被清除。检查this

【讨论】：