HTML5拖放问题

谢谢你看这篇文章

我有一个jsFiddle页面来展示我的问题我的js小提琴

    #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;}   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)); }     
Drag the image you want into this box!
 
 
 
Main Image
 
Image 2
 
Image 3
 
 
      

基本上发生的是当我将图像拖动到上面的div（有3个div）时，我希望能够让图像保持原样并且不会从原始位置消失 。

拖动图像的div也应该捕获图像， 如果新对象拖动到同一个div （之前已经放下另一个图像）， 新图像应该覆盖旧图像 。

另一个问题是如果我有一个带有表单post的提交按钮，通过获取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); } 

使用下面的答案，保留原始图像。 但问题是如果我在已经获得图像的框中拖动另一张图片，它将不会覆盖。

Answer 1

我对你的drop函数做了一些修改。

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

试试这个

Answer 2

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

如果它有效，试试这个。