HTML5拖放问题 [英] HTML5 Drag and Drop Issue
问题描述
感谢您查看这篇文章
我有一个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）;
}
函数drop（ev）
{
ev.preventDefault（）;
var data = ev.dataTransfer.getData（Text）;
ev.target.appendChild（document.getElementById（data））;
}
< / script>
< / head>
< body>
< center>
< p>将您要的图片拖到此框！< / p>
< table>
< div id =div1ondrop =drop（event）ondragover =allowDrop（event） >< / div>< / td>
< td>< p>< b>图片2< / b>< / p>< div id =div2ondrop =drop（event）ondragover =allowDrop >< / div>< / td>
< td>< p>< b>图片3< / b>< / p>< div id =div3ondrop =drop（event）ondragover =allowDrop >< / div>< / td>
< / tr>
< / table>
< img id =drag1ondrop =drop（event）draggable =truewidth =150height =150ondragstart =drag（event）src =http：// netdna.webdesignerdepot.com/uploads/2013/02/thumbnail32.jpgalt =img01/>< / a>
< img id =drag2ondrop =drop（event）draggable =truewidth =150height =150ondragstart =drag（event）src =http：// netdna.webdesignerdepot.com/uploads/html5-css3-wireframing/html5-logo.jpgalt =img02/>< / a>
< img id =drag3ondrop =drop（event）draggable =truewidth =150height =150ondragstart =drag（event）src =http：// netdna.webdesignerdepot.com/uploads/2012/12/thumb-1.jpgalt =img03/>< / a>
< / body>
< / html>
基本上发生什么是当我将图像拖动到上面的div（有3 div）能够使图片保持在原始位置而不会从原始位置消失。
图片被拖曳到的div也会同时撷取图片，应将新物件拖曳到同一个div
另一个问题是如果我有一个提交按钮与表单post，通过采取div1，div2，div3的值，浏览器能否捕获用户输入？例如drag1，drag2或drag3。
任何人都可以帮助我解决问题，感谢您的帮助!!
使用此 jsFiddle 更新：
函数drop（ev）
{
ev.preventDefault（）;
var data = ev.dataTransfer.getData（Text）;
var new_img = $（'＃'+ data）.clone（）;
$（'＃'+ ev.target.id）.html（new_img）;
}
使用以下答案，原始图像保留。但是问题是如果我在已经获得图像的框中拖动另一张图片，则不会覆盖。
对您的放置函数进行一些更改。
函数drop（ev）
{
ev.preventDefault ;
var data = ev.dataTransfer.getData（Text）;
var new_img = $（'＃'+ data）.clone（）;
$（'＃'+ ev.target.id）.HTML（new_img）;
}
Thanks for looking at this post
I got a jsFiddle page up to demonstrate my issue 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>
Basically what happen is when I drag the image into the div above ( there 3 div ) , I want to able to have the image remain where it is and not disappear from its original location.
The div which the image is drag into should capture the image also, should new object is drag into the same div (which previously already drop another image), the new image should overwrite the old image.
Another question is If I have a submit button with form post, by taking value of div1,div2,div3, will the browser able capture user input ? e.g drag1 , drag2 or drag3.
Anyone can help me solve the issue, Thanks for helping !!
Updated using this jsFiddle:
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html(new_img);
}
Using the answer below, the original image retain. but issue is if i drag another picture in a box that already got image, it won't overwrite.
I have made some changes to your drop function.
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html(new_img);
}
这篇关于HTML5拖放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
