javascript - Drag and Drop ( Copy ) in another Div is lining up

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. The problem is the img are lining up the left.

HTML CODE :

        <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

    #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

///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 !!

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. The problem is the img are lining up the left.

HTML CODE :

        <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

    #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

///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 !!

Share Improve this question edited Sep 14, 2017 at 14:25 asked Sep 14, 2017 at 14:17 Sora 1671 silver badge8 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

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:

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.

Note: I have reduced the dimesions of the boxes so that they fit perfectly inside the demo window, please set the padding-top andpadding-left` to about half of the width of the respective dimensions!

///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./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>

On the drop event you get the x and y coords of the mouse and set the style to be absolute in that position. 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./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Drag and Drop ( Copy ) in another Div is lining up - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)