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

回答

相关问题