我不能將圖像拖放到其他圖像上

我有一些非常簡單的代碼，允許將圖像拖放到不同的框中。當圖像被刪除時，其父節點將其刪除，並將其放置的區域附加到該節點上。這工作正常。但是，如果我將圖像拖放到另一個圖像上，出於某種原因，同一個ondrop事件會觸發，因此圖像最終會被刪除，但不會重新插入。我不能將圖像拖放到其他圖像上

我已經嘗試了幾件事情來解決這個問題：添加第二個drop函數，該函數什麼都不做，並將圖像的ondrop屬性設置爲那個，爲返回false的圖像創建一個「不允許的」函數，都不起作用。當某些東西被放到圖像上時，應該沒有理由要求放置函數被調用。無論如何，我認爲元素默認情況下不接受拖動的元素。

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      .area { 
       height:150px; 
       width:400px; 
       border:2px solid; 
      } 
     </style> 
    </head> 
    <body onload="load()"> 

     <script type="text/javascript"> 

      function load() { 
       var bottom = document.getElementById("bottom"); 
       bottom.appendChild(newDraggableImage("square.jpg", 1)); 
       bottom.appendChild(newDraggableImage("triangle.jpg", 2)); 
       bottom.appendChild(newDraggableImage("circle.jpg", 3)); 
      } 

      function newDraggableImage(source, id) { 
       var image = document.createElement('img'); 
       image.src = source; 
       image.id = id; 
       image.draggable = true; 
       image.ondragstart = drag; 
       return image; 
      } 

      function drop(event) { 
       event.preventDefault(); 
       var image = document.getElementById(event.dataTransfer.getData('Text')); 
       image.parentElement.removeChild(image); 
       event.target.appendChild(image); 
      } 

      function allowDrop(event) { 
       event.preventDefault(); 
      } 

      function drag(event) { 
       event.dataTransfer.setData('Text', event.target.id); 
      } 

     </script> 
     <div id="top" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
     <div id="bottom" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    </body> 
</html>

來源

2014-05-01 codebreaker

我不太清楚有足夠詳細地瞭解你在做什麼。我的理解是，你將圖像放在div上，然後div包含該圖像。你只想要將圖像放在div上，而不是其他圖像上？

然後你在說什麼是事件冒泡。事件冒泡是當子元素繼承父母的事件處理程序時，您不需要。在這種情況下，您可以使用addEventListener並將第三個值設置爲false。

// watch the false! 
document.getElementById("top").addEventListener("drop", drop, false);

來源

2014-05-01 22:58:39 tomysshadow

是的，這是正確的，我拖放圖像到divs，他們進入該div。對不起，如果不明確。我不知道事件冒泡是一件事情，這很有道理。謝謝！ – codebreaker

另外，我在事件冒泡研究中發現的事情是在ondrop函數中做event.stopPropagation（）。 – codebreaker

我不能將圖像拖放到其他圖像上

回答

相關問題