Question

感谢您查看此帖

我有一个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);
}

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

Answer 1

我对你的掉落功能进行了一些修改。

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

try this

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);
}

如果有效，请尝试此操作。

HTML5拖放问题

2 个答案: