Dom更新問題

我試圖從div中拖動圖像到div，確保一次只有一個div在div中。它在Opera上效果很好，但在Chrome（及其他）中失敗。它似乎工作，直到我更新來自JavaScript的元素，然後更新似乎沒有在Chrome內部刷新。Dom更新問題

我可以拖動任何一個圖像到第三個方塊，但然後一切都被凍結。我很樂意解決這個問題。

<!DOCTYPE HTML> 
<html> 
<head> 
    <style type="text/css"> 
    .outer { 
     width: 150px; 
     height: 40px; 
    } 

    .square { 
     float: left; 
     width: 32px; 
     height: 32px; 
     margin: 1px; 
     padding: 0px; 
     border: 1px solid #aaaaaa; 
    } 
    </style> 

    <script type="text/javascript"> 
     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"); 
      ev.target.appendChild(document.getElementById(data)); 

      lock(); 
     } 

     function lock() { 
      var squares = document.getElementsByClassName("square"); 

      for (var i = 0; i < squares.length; i++) { 
       if (squares[i].children.length == 0) { 
        squares[i].ondragover = 'allowDrop(event)'; 
       } 
       else { 
        squares[i].ondragover = ''; 
       } 
      } 
     } 

     function init() { 
      document.write("<div class='outer square' ondrop='drop(event)' ondragover='allowDrop(event)'><img src='bb.png' alt='bb' id=1 class='movable' draggable=true ondragstart='drag(event)'></div>"); 

      lock(); 
     } 
    </script> 
</head> 

<body> 
    <script type="text/javascript"> 
     init(); 
    </script> 

    <div class='outer square' ondrop='drop(event)' ondragover='allowDrop(event)'> 
    <img src="aa.png" alt='aa' id=2 class='movable' draggable=true ondragstart="drag(event)"> 
    </div> 
    <div class='outer square' ondrop='drop(event)' ondragover='allowDrop(event)'> 
    </div> 
</body> 
</html>

來源

2012-07-06 Damon Achey

如果我不叫「鎖（）」拖動似乎工作，但後來我有可能有多個圖像投進同一div的問題。 – 2012-07-06 21:51:26

squares[i].ondragover = 'allowDrop(event)';

分配null在Chrome .ondragover，因爲它是一個字符串，而不是一個功能。試着用替換它：

squares[i].ondragover = allowDrop; //<-- no quotes here

來源

2012-07-06 22:01:08 Esailija

就是這樣，這個提示還修復了我在這個減少的例子之外的其他一些bug。謝謝！ – 2012-07-07 02:51:03

回答

相關問題