HTML5 +的Javascript拖動ñ下降

Question

我的問題是基於一種對這個例子，但也有一些區別.. http://jsfiddle.net/raad/SSxdB/15/

我使用的菜單，其中有3-4個類別，每個類別中，有4個項目.. 所以我想拖放一個元素到指定的分區..和指定的元素，從菜單列表隱藏（我已經做到了這一點），但也能夠撤消它（也已經明白了），還有，如果我拖ñn刪除另一個元素在指定的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包含......內部，它不會被「移動」隨着div ..（目前我曾嘗試過我在每個div上使用背景圖像，所以它不明顯..

Answer 1

and here來解決.. 爲什麼div在消失，當行動是要取代現有的分區在droparea？

因爲ev.target，將「看」爲目標，在現有的div的droparea內.. 例如..

當一個元素是在下降區域放在首位下降，EV .TARGET是例如DIV與id=drop1（如果選擇把它放在該）

但 當另一個因素是對先前已在droparea下降元素的頂部下降，那麼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); 
     }