0

我的问题是基于这个例子，但有一些区别.. 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("拖动")[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 上都使用了背景图片，所以它并不明显..

4

1 回答 1

0

解决方案来了..为什么 div 消失了，当动作是替换 droparea 上的现有 div 时？

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

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

但是，当另一个元素被放置在先前已放置在放置区域中的元素之上时，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);
        }
于 2013-04-10T09:12:33.960 回答