Question

我正在进行拖放项目，在将图像放入另一个Div时，它必须保留在我离开它的同一个地方。问题是img排在左边。

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代码

    #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代码

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

有人能帮帮我吗？谢谢大家!!

Answer 1

<强>更新

从事件中你可以得到拖动的位置并减去父项的偏移量，因此我们可以将它放在那个确切的位置。

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

旧答案：

你想要这样的东西吗？

用于实现此目的的CSS是：

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

所以我给了一半的宽度和高度作为填充，以便图像定位在那里！我也在使用box-sizing:border-box，因此填充不会添加到div的维度。

注意： 我减少了盒子的尺寸，使它们完全适合演示窗口，请将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

在drop事件中，您将获得鼠标的x和y坐标，并将样式设置为该位置的绝对值。请注意，图像的左上角将捕捉到鼠标指针的精确坐标。见下文：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: