HTML5 + Javascript拖放

Question

my question is based kind of on this example but there are some differences.. http://jsfiddle.net/raad/SSxdB/15/

i use a menu, which has 3-4 categories, and each category, has 4 items.. so i want to drag and drop an element to a specified div..and the specified element, to be hidden from the menu list (i ve done this) BUT be also able to undo it (have figured it out as well) and also, if i drag n drop another element on a specified div, that already another element has been dropped, the first one to be restored, and the new one takes up its place.. and here is were i have the problem.. this is the code..

    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";
                }
            }
    }

and this is the part that "causes" me the problem apart, from the fact that if there are 2 or mover divs already placed, they disappear all..the other problem is, that if i insert it in the allowDrop(ev) function, it does actually remove the previous elements, and on drop places the new one..but it removes them when the element is over the div..however i want this to be done when dropped..so when i move this piece of code to drop function, it does, remove the previously entered element, but it "vanishes" the new one.. as well...can't tell why this is happening.. also i would like a suggestion replacing the temp_node = document.getElementsByClassName("dragged")[0]; by sth more specific (perhaps child node from the specified 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";

the html looks sth like this

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

here is in jsfiddle sort of http://jsfiddle.net/q5FAq/3/ but also i noticed, that if the removed div contains sth inside, it doesn't get "moved" along with the div.. (currently on what i had tried i had used background images on each div so it wasn't noticeable..

Answer 1

and here comes the solution.. why the div was disapperaing, when the action was to replace an existing div on the droparea?

because the ev.target, would "see" as target, the existing div inside the droparea.. for example..

when an element was dropped on the first place in the drop area, the ev.target was for instance div with id=drop1 (if selected to drop it there)

BUT when another element was dropped on top of an element that had previously been dropped in the droparea, then the ev.target would be dragged-drag1 but since the code, was supposed to remove that div, for that reason the recent dropped div got disappeared as well...

so under the line

 ev.target.appendChild(nodeCopy);

gets replaced with this block

        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);
        }