遍歷DOM樹

我一直在研究JavaScript代碼的拖放框，用戶可以基本上拖動圖像到拖放框中，當它們拖動到特定的組合中時，它會返回某種類型的消息。例如，如果它們在image1，image3和image5中拖動，它會返回一條消息。我一直在使用DOM樹，但我無法弄清楚如何檢查多個圖像被拖入時的狀態。當下圖所示的一個圖像時，我可以使其工作。任何幫助將不勝感激。遍歷DOM樹

<html> 
<head> 
    <meta charset ="utf-8"> 
    <style type="text/css"> 
     #dragBox {width:400px; height:320px; margin:10px;padding:10px;border:1px solid #aaaaaa;} 

     .thumbnails img 
     { 
      height: 80px; 
      border: 4px solid #555; 
      padding: 1px; 
      margin: 0 10px 10px 0; 
     } 

     .thumbnails img:hover 
     { 
      border: 4px solid #00ccff; 
      cursor:pointer; 
     } 

    </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"); 
     var theNode = document.getElementById(data); 
     var nodeCopy = theNode.cloneNode(true); 

     ev.target.appendChild(nodeCopy); 

     if (data == "drag1") 
     { 
      foodOne(); 
     } 

     //ev.target.removeChild(nodeCopy); 

    } 

    function foodOne() 
    { 
     alert("You choose Food One"); 
    } 

    </script> 
</head> 
<body bgcolor="#333333"> 
<div class="gallery" align="center"> 
    <div class="thumbnails"> 
     <img id="drag1" src="foodOne.jpg" draggable="true" ondragstart="drag(event)""> 
     <img id="drag2" src="foodTwo.jpg" draggable="true" ondragstart="drag(event)" > 
     <img id="drag3" src="foodThree.jpg" draggable="true" ondragstart="drag(event)"> 
     <img id="drag4" src="foodFour.jpg" draggable="true" ondragstart="drag(event)"> 
     </br></br> 
     <div id="dragBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    </div></br> 

</div> 
</body>

來源

2013-04-01 Nick

甚至不知道像多滴存在。但是，我再也沒有做太多的拖放東西，也許有多個你得到一個事件數組？還是有些國家說出色的掉落作業？

所以我對這方面的知識有限，對我來說，合乎邏輯的解決方案是將類似於結果數組的東西放在每個drop上的id上，然後添加一個新函數來檢查數組是否包含您正在尋找的組合。

來源

2013-04-01 13:37:08 Robert

我認爲他正在按順序（逐個）拖放，並且需要匹配新刪除的元素**和**已經刪除的元素對某些標準 – Ejaz

回答

相關問題