0

在我开始之前是 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 中，因为链接是本地的，但你明白了）和一个我可以拖动它们的框。问题是，当我将一张图像拖入该图像不再存在的框中时，当我拖动第二张图像时，它会与下拉框一起折叠并移出其原始位置。

我正在努力做到这一点，以便当用户拖动图像时，该图像不会从顶部移除，并且当第二个图像移动时它会执行相同的操作，并且下拉框始终保持在相同的位置图像被拖入。

如果有人可以帮助我，那就太好了！

4

1 回答 1

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/

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

编辑

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

于 2013-03-01T15:29:00.633 回答