谢谢你看这篇文章
我得到了一个 jsFiddle 页面来演示我的问题 my js fiddle
<!DOCTYPE HTML>
<html>
<head>
<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>
<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");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<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>
</html>
基本上，当我将图像拖到上面的 div 中(有 3 个 div)时，我希望能够让图像保持在原处，而不是从其原始位置消失。
图像被拖入的 div 也应该捕获图像，如果新对象被拖入同一个 div(之前已经放置了另一个图像)，新图像应该覆盖旧图像。
另一个问题是，如果我有一个带有表单发布的提交按钮，通过获取 div1、div2、div3 的值，浏览器是否能够捕获用户输入？例如 drag1、drag2 或 drag3。
任何人都可以帮助我解决问题，感谢您的帮助!!
使用此 jsFiddle 更新:
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html(new_img);
}
使用下面的答案，保留原始图像。但问题是，如果我将另一张图片拖到一个已经有图像的框中，它不会被覆盖。
最佳答案
我对你的 drop 函数做了一些修改。
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html(new_img);
}
关于javascript - HTML5 拖放问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19315002/