Javascript 如何使拖放框重置位置？_Javascript_Html

Javascript 如何使拖放框重置位置？

javascript html

Javascript 如何使拖放框重置位置？,javascript,html,Javascript,Html,在我开始之前，这里是JSFIDLE链接：以及守则： <!DOCTYPE HTML> <html> <head> <meta charset ="utf-8"> <style type="text/css"> #dragBox {width:336px; height:221px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </s

在我开始之前，这里是JSFIDLE链接：

以及守则：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset ="utf-8">
    <style type="text/css">
        #dragBox {width:336px; height:221px; margin:10px;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));

        if (data == "drag1")
        {
            foodOne();
        }
        if (data == "drag2")
        {
            foodTwo();
        }
    }

    function foodOne()
    {
        alert("You choose Food One");
    }

    function foodTwo()
    {
        alert("You choose Food Two");
    }
    </script>
</head>
<body bgcolor="#333333">
<div div align="center">
    <img id="drag1" src="foodOne.jpg" draggable="true" ondragstart="drag(event)" width="336" height="221">
    <img id="drag2" src="foodTwo.jpg" draggable="true" ondragstart="drag(event)" width="336" height="221">
    <br><br>
    <div id="dragBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</body>
</html>


#dragBox{宽度：336px；高度：221px；边距：10px；填充：10px；边框：1px实心35; aaaaaa；}
功能allowDrop（ev）
{
ev.preventDefault（）；
}
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
如果（数据==“drag1”）
{
foodOne（）；
}
如果（数据==“drag2”）
{
食物二（）；
}
}
函数foodOne（）
{
警惕（“你选择一种食物”）；
}
函数foodTwo（）
{
警惕（“你选择两种食物”）；
}

我有两个图像（由于链接是本地的，所以图像没有显示在JSFIDLE中，但是您知道了）和一个我可以拖动它们的框。问题是，当我将一个图像拖动到框中时，该图像不再存在，而当我拖动第二个图像时，它会随着拖放框折叠，并移出其原始位置

我试图让它在用户拖动图像时，该图像不会从顶部移除，当第二个图像移动时，它会执行相同的操作，并且在拖动图像时，下拉框始终保持在相同的位置

如果有人能帮我，那就太好了

可以使用cloneNode复制图像节点，并将其附加到图像框中。这样，原始图像节点将保持不变：

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var draggedOrNewNodeId = "dragged-"+data;
    var theNode = document.getElementById(data);
    var draggedNode = document.getElementById(draggedOrNewNodeId);
    if (draggedNode != null) { ev.target.removeChild(draggedNode); }
    var nodeCopy = theNode.cloneNode(true);
    nodeCopy.id = draggedOrNewNodeId;
    nodeCopy.setAttribute("class", "dragged");
    nodeCopy.setAttribute("draggable", "false")
    ev.target.appendChild(nodeCopy);

    if (data == "drag1") {
        foodOne();
    }
    if (data == "drag2") {
        foodTwo();
    }
}

看

在Firefox 19.0和Chrome 25.0.1364.97 m上测试，均在Windows 7上不过，我看不出你的盒子倒塌问题

编辑

更新后的代码现在将克隆被拖动的节点并为其分配一个新id，该id可用于在拖动新节点时将其删除，并且只允许拖动每个节点的一个实例，并禁用对被拖动节点的拖动（这很容易删除），以防止进一步拖动污染容器。

这有助于，但我试图得到它，使只有一个图像显示在框中时，下降，当我拖动第二个图像，该图像显示等。。。现在它会附加掉的每个图像，但我需要它一次只显示一个图像。这是可能的吗？我可以在每次执行节点后将其设置为空吗？使用更新，它只在第一次拖动时起作用，但在这之后，当我拖动任何图像时，不会发生任何事情。我正在使用Chrome浏览器。@Nick-我已经更新了我的答案，希望它能满足您的需要。Nick，请查看我更新的答案。嗯，您是否希望两个图像都被拖入，但每个图像只有一个实例？好的，最后一次更新应该可以做到这一点=）