Question

在我开始之前是jsFiddle链接：http://jsfiddle.net/SSxdB/5/

代码：

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

我有两张图片（图片没有在jsFiddle中显示，因为链接是本地的，但你明白了）和一个我可以拖动它们的框。问题是当我将一个图像拖到框中时，图像不再存在，当我拖动第二个图像时，它会与下拉框一起折叠并移出其原始位置。

我正在尝试这样做，以便当用户拖动图像时，该图像不会从顶部移除，当第二个图像移入其中时，它会执行相同的操作，并且丢弃框始终保持不变拖动图像时的位置。

如果有人能帮助我，那就太棒了！

Answer 1

您可以使用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();
    }
}

请参阅http://jsfiddle.net/raad/SSxdB/15/

在Windows 7上测试Firefox 19.0和Chrome 25.0.1364.97 m 我没有看到你的折叠盒问题。

修改

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

如何让拖放盒重置位置？

1 个答案: