0

谢谢你看这个帖子

我有一个 jsFiddle 页面来展示我的问题我的 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);
}

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

4

2 回答 2

1

我对您的 drop 功能做了一些更改。

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

尝试这个

于 2013-10-11T09:54:26.850 回答
0 
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);
}

如果它有效，试试这个。

于 2018-05-18T03:36:06.057 回答