ドロップイベントが発生していません

このコードでは、ドラッグメッセージは表示されますが、ドロップされたメッセージは表示されません。私はあなたがe.preventDefault()でdragstartイベントをキャンセルされた第1の要素が視覚的にドラッグされていないが、dragstartイベントがドロップイベントが発生していません

<!DOCTYPE HTML> 
<html> 
    <head> 

    </head> 
     <body> 
      <section draggable="true" id="origen" style="height: 50px; width: 50px; border-color: green; border-style: solid;">origen</section> 
      <section draggable="true" id="destino" style="height: 200px; width: 200px; border-color: blue; border-style: solid;">destino</section> 

      <script> 
       window.addEventListener("load",carga); 
       var origen = document.getElementById('origen'); 
       var destino = document.getElementById('destino'); 

       function carga(e){ 
        origen.addEventListener('dragstart',function(e){ 
         e.preventDefault(); 
         e.dataTransfer.setData("Text",origen.outerHTML); 
         console.log("dragstart"); 
        },false); 


        destino.addEventListener('drop',function(e){ 
         e.preventDefault(); 
         //origen.innerHTML = e.dataTransfer.getData("Text"); 
         console.log('dropped'); 
        },false); 
       } 
      </script> 
     </body> 
</html>

出典

2017-11-09 af_imi4

をトリガーされるドラッグする要素がドラッグされていない理由、それはです。

他の要素をドロップターゲットにドロップできるようにするには、ドロップターゲットのdragoverイベントをキャンセルする必要があります。

window.addEventListener("load",carga); 
 
var origen = document.getElementById('origen'); 
 
var destino = document.getElementById('destino'); 
 

 
function carga(e){ 
 
    origen.addEventListener('dragstart',function(e){ 
 
     //e.preventDefault(); 
 
     e.dataTransfer.setData("Text",origen.outerHTML); 
 
     console.log("dragstart"); 
 
    },false); 
 

 
    destino.addEventListener('dragover',function(e){ 
 
     e.preventDefault(); 
 
    }); 
 
    destino.addEventListener('drop',function(e){ 
 
     e.preventDefault(); 
 
     //origen.innerHTML = e.dataTransfer.getData("Text"); 
 
     console.log('dropped'); 
 
    },false); 
 
}

<section draggable="true" id="origen" style="height: 50px; width: 50px; border-color: green; border-style: solid;">origen</section> 
 
<section draggable="true" id="destino" style="height: 200px; width: 200px; border-color: blue; border-style: solid;">destino</section>

（すなわちケースである理由の詳細については、 hereを見出すことができます）

出典

2017-11-09 15:31:26 Connum

ドロップイベントが発生していません

答えて

関連する問題