HTML5拖放问题
HTML5拖放问题
提问于 2013-10-11 09:42:42
谢谢你看这篇文章
我有一个jsFiddle页面来演示我的问题我的小提琴
<!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 (先前已经删除了另一个图像)中，新图像应该覆盖旧的图像。
另一个问题是，如果我有一个带有表单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);
}使用下面的答案，原始图像保留。但是问题是，如果我把另一张图片拖到一个已经有图像的盒子里，它就不会被覆盖。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-10-11 09:54:26
我对你的投递功能做了一些修改。
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html(new_img);
}尝尝这个
Stack Overflow用户
发布于 2018-05-18 03:36:06
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);
}如果有用的话试试这个。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19315002
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号