HTML5 拖放问题答案

【问题标题】：HTML5 Drag and Drop IssueHTML5 拖放问题
【发布时间】：2013-10-19 08:21:58
【问题描述】：

感谢您看这篇文章

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

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

【问题讨论】：

第一个问题的解决方案在这里：stackoverflow.com/questions/12259144/…
很久以前我为自己做了小提琴，认为它可能会有所帮助...jsbin.com/oluhuk/2/edit
@João 任何人都可以帮助我更新版本
嗨，你解决了你的任务...
@codebreaker 不是真的。你可以看到新的小提琴，我可以把图像放进去，但我不能在 div 上的现有图像上放另一个图像。

标签： javascript jquery css html

【解决方案1】：

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

如果可行，试试这个。

【讨论】：

【解决方案2】：

我对你的 drop 功能做了一些改动。

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

try this

【讨论】：

你好，我试过你的代码，但是如果我在同一个盒子里放另一个对象，它不能被新图像覆盖。