在另一个Div中拖放（复制）

Question

I'm doing a Drag and Drop project where when dropping an image in another Div, it has to stay in the same place where I left it. 我正在做一个拖放项目，当将图像拖放到另一个Div中时，它必须留在我离开它的位置。 The problem is the img are lining up the left. 问题是img在左边对齐。

HTML CODE : HTML代码：

        <html>
    <head>
        <link type="text/css" rel="stylesheet" media="screen" href="css/testednd.css" /> <!-- CSS das div's -->
        <script src="js/testednd.js"></script> <!-- Script clickImagem -->
    </head>
    <body>
        <div id="conteudo-left" style="position:static; left:10px; top:20px; width:300; height:660; z-index:-1; overflow: auto">
            <form name="form_dnd_left" border = 1>
                <ul> 
                    <li><img id="drag1" src="images/Comp3.jpg" draggable="true" ondragstart="drag(event)"  alt="" /></li>
                </ul>
            </form>
        </div>
        <div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)"><!-- abrimos a div conteudo do meio-->
        </div>
    </body>
</html>

CSS CODE CSS代码

    #conteudo-left{
    width:300px;
    height:660px;
    float:left;
    background-color:#FFF;
}

#conteudo{
    width:600px;
    height:460px;
    float:left;
    background-color:#ff1;  
    display: initial;
    margin: auto;
    .columns {
    }

}

JavaScript Code JavaScript代码

///Drag'n Drop functions
function allowDrop(ev) 
{
    ev.preventDefault();
}

function drag(ev) 
{
    ev.dataTransfer.setData("text", ev.target.id);
    ev.dataTransfer.effectAllowed = "copy";
}

function drop(ev) 
{
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var copyimg = document.createElement("img");
    var original = document.getElementById(data);
    copyimg.src = original.src;
    ev.target.appendChild(copyimg);
}

Can somebody help me?? 有人可以帮我吗？ Thanks for all !! 谢谢大家！

Answer 1

Update: 更新：

From the event you can get the position of the drag and minus the offset of the parent, thus we can drop it in that exact location. 从事件中，您可以获得拖动的位置并减去父对象的偏移量，因此我们可以将其放置在该确切位置。

function drop(ev) 
{
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var copyimg = document.createElement("img");
    var parent = document.createElement("conteudo");
    var original = document.getElementById(data);
    copyimg.src = original.src;
    copyimg.style.position = "absolute";
    copyimg.style.left = ev.clientX - ev.target.offsetLeft+"px";
    copyimg.style.top = ev.clientY - ev.target.offsetTop+"px";
    ev.target.appendChild(copyimg);
}

Old Answer: 旧答案：

Do you want something like this? 你想要这样的东西吗？

CSS used to make this is: 用于实现此目的的CSS是：

padding-left: 150px;
padding-top: 125px;
box-sizing: border-box;

So I gave half of the width and height as padding so that the images get positioned there! 因此，我将宽度和高度的一半作为填充，以便图像可以在那里定位！ also I am using box-sizing:border-box so that the padding does not get added to the dimensions of the div . 我也使用box-sizing:border-box以便填充不会被添加到div的尺寸中。

Note: I have reduced the dimesions of the boxes so that they fit perfectly inside the demo window, please set the padding-top and padding-left` to about half of the width of the respective dimensions! 注意： 我已经减小了盒子的尺寸，以使它们完全适合演示窗口，请将padding-top and padding-left`设置为各自尺寸的一半左右！

 ///Drag'n Drop functions function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); ev.dataTransfer.effectAllowed = "copy"; } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); var copyimg = document.createElement("img"); var parent = document.createElement("conteudo"); var original = document.getElementById(data); copyimg.src = original.src; copyimg.style.position = "absolute"; copyimg.style.left = ev.clientX - ev.target.offsetLeft+"px"; copyimg.style.top = ev.clientY - ev.target.offsetTop+"px"; ev.target.appendChild(copyimg); }

 #conteudo-left{ width:150px; height:330px; float:left; background-color:#FFF; } #conteudo{ width:300px; height:250px; position:relative; float:left; background-color:#ff1; display: initial; margin: auto; }

 <html> <head> <link type="text/css" rel="stylesheet" media="screen" href="css/testednd.css" /> <!-- CSS das div's --> <script src="js/testednd.js"></script> <!-- Script clickImagem --> </head> <body> <div id="conteudo-left" style="position:static; left:10px; top:20px; width:300; height:660; z-index:-1; overflow: auto"> <form name="form_dnd_left" border = 1> <ul> <li><img id="drag1" src="http://via.placeholder.com/50x50" draggable="true" ondragstart="drag(event)" alt="asdfasdf" /></li> </ul> </form> </div> <div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> </body> </html>

Answer 2

On the drop event you get the x and y coords of the mouse and set the style to be absolute in that position. 在放置事件中，您将获得鼠标的x和y坐标，并将样式设置为该位置的绝对坐标。 Note that the top left corner of the image will snap to the exact coord of the mouse pointer. 请注意，图像的左上角将捕捉到鼠标指针的确切坐标。 See below: 见下文：

 ///Drag'n Drop functions function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); ev.dataTransfer.effectAllowed = "copy"; } function drop(ev) { ev.preventDefault(); var x = ev.clientX; var y = ev.clientY; var data = ev.dataTransfer.getData("text"); var copyimg = document.createElement("img"); var original = document.getElementById(data); copyimg.src = original.src; ev.target.appendChild(copyimg); copyimg.setAttribute("style", "position: absolute; top: "+y+"px; left:"+x+"px;"); }

 #conteudo-left{ width:150px; height:330px; float:left; background-color:#FFF; } #conteudo{ width:300px; height:250px; float:left; background-color:#ff1; display: initial; margin: auto; box-sizing: border-box; }

 <html> <head> <link type="text/css" rel="stylesheet" media="screen" href="css/testednd.css" /> <!-- CSS das div's --> <script src="js/testednd.js"></script> <!-- Script clickImagem --> </head> <body> <div id="conteudo-left" style="position:static; left:10px; top:20px; width:300; height:660; z-index:-1; overflow: auto"> <form name="form_dnd_left" border = 1> <ul> <li><img id="drag1" src="http://via.placeholder.com/50x50" draggable="true" ondragstart="drag(event)" alt="asdfasdf" /></li> </ul> </form> </div> <div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> </body> </html>

在另一个Div中拖放（复制）

问题描述

2 个解决方案

解决方案1
2 2017-09-14 14:30:53

解决方案2
2 已采纳 2017-09-14 14:38:09

在另一个Div中拖放（复制）

问题描述

2 个解决方案

解决方案1 2 2017-09-14 14:30:53

解决方案2 2 已采纳 2017-09-14 14:38:09

解决方案1
2 2017-09-14 14:30:53

解决方案2
2 已采纳 2017-09-14 14:38:09