HTML5 + Javascript 拖放

Question

我的问题是基于这个例子，但有一些区别.. http://jsfiddle.net/raad/SSxdB/15/

我使用一个菜单，它有 3-4 个类别，每个类别有 4 个项目。 所以我想将一个元素拖放到指定的 div ..和指定的元素，从菜单列表中隐藏（我已经这样做了）但也能够撤消它（也已经弄清楚了）而且，如果我将另一个元素拖放到指定的 div 上，则已经删除了另一个元素，第一个元素被恢复，新元素占据了它的位置.. 这是我有问题..这是代码..

    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");
        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");
        document.getElementById(data).style.display = "none";
        remove_id = draggedOrNewNodeId +  "_remove";
        nodeCopy.innerHTML="<span class='undo' id='" + remove_id + "'>x</span>";
        ev.target.appendChild(nodeCopy);

        var remove = document.getElementsByClassName("undo").length;
            for (i=0; i<remove; i++) {
            var nodeToBeRemoved = /_remove$/;
            var nodeToBeReplaced = /dragged-/;
            deletedNode = remove_id.replace(nodeToBeRemoved, "");
            restoredNode = deletedNode.replace(nodeToBeReplaced, "");
                document.getElementsByClassName("undo")[i].onclick = function() {
                    elem = document.getElementById(deletedNode);deleted
                    elem.parentNode.removeChild(elem);
                    document.getElementById(restoredNode).style.display = "block";
                }
            }
    }

这是“导致”我这个问题的部分，如果已经放置了 2 个或移动 div，它们就会全部消失。另一个问题是，如果我将它插入到 allowDrop( ev）函数，它实际上确实删除了以前的元素，并且在放置时放置了新元素..但是当元素超过div时它会删除它们..但是我希望在放置时完成..所以当我移动这个时一段代码删除函数，它确实删除了先前输入的元素，但它“消失”了新元素..以及......无法说出为什么会这样...... 我也想建议更换 temp_node = document.getElementsByClassName("dragged")[0];更具体的（也许是来自指定 ev.target 的子节点？

        tempNodeCheck = hasClass(ev.target, "dragged"); 
        if (tempNodeCheck) {
                var nodeToBeReplacedcopy = /dragged-/;
                tempParentNode = ev.target.parentNode;
                temp_node = document.getElementsByClassName("dragged")[0];
                temp_node1 = document.getElementsByClassName("dragged")[0].id;
                restoredNode = temp_node1.replace(nodeToBeReplacedcopy, "");
                temp_node1.parentNode.removeChild(temp_node1);
                document.getElementById(restoredNode).style.display = "block";

html 看起来像这样

<div id="drag1" draggable="true" ondragstart="drag(event)"></div>
<div id="drag2" draggable="true" ondragstart="drag(event)"></div>
<div id="drag3" draggable="true" ondragstart="drag(event)"></div>
<div id="drag4" draggable="true" ondragstart="drag(event)"></div>

<div class="droparea" id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="droparea" id="drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="droparea" id="drop3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="droparea" id="drop4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="droparea" id="drop5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

这是在 jsfiddle 中的 http://jsfiddle.net/q5FAq/3/ 但我也注意到，如果删除的 div 包含 sth 内部，它不会与 div 一起“移动”。（目前我尝试过在每个 div 上使用背景图像，所以它并不明显。 .

Answer 1

解决方案来了.. 当操作是替换放置区域上的现有 div 时，为什么 div 消失了？

因为 ev.target 将“看到”为目标，即 droparea 内的现有 div.. 比如……

当一个元素被放置在放置区域的第一个位置时，ev.target 是例如带有id=drop1 的 div（如果选择将其放置在那里）

但是 当另一个元素被放置在先前已放置在放置区域中的元素之上时，ev.target 将是 dragged-drag1 但由于代码应该删除该 div，因此最近放置的 div 消失了还有……

所以下线

 ev.target.appendChild(nodeCopy);

被这个块替换

        tempNodeCheck = hasClass(ev.target, "dragged");
        if (tempNodeCheck) {
                var nodeToBeReplacedcopy = /dragged-/;
                tempParentNode = ev.target.parentNode;
                temp_node_class = tempParentNode.getElementsByClassName("dragged")[0];
                temp_node_id = temp_node_class.id;
                remove_node = document.getElementById(temp_node_id);
                restoredNode = temp_node_id.replace(nodeToBeReplacedcopy, "");  
                remove_node.parentNode.removeChild(remove_node);
                document.getElementById(restoredNode).style.display = "block";
                tempParentNode.appendChild(nodeCopy);
        }
        else {
        ev.target.appendChild(nodeCopy);
        }