Html5: « ondrop » événement ne se déclenche pas quand je laisse tomber un élément

Dans ma demande je le code HTML suivant avec js et stylesheet:Html5: « ondrop » événement ne se déclenche pas quand je laisse tomber un élément

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Drag'n'Drop demo</title> 

     <style> 
      #dropArea{ 
       min-width:50%; 
       min-height:800px; 
       background-color:#FF00BB; 
       float: left; 
      } 

      #imgArea { 
       min-width:49%; 
       min-height:800px; 
       background-color:#0F0FBB; 
       float: right; 
      } 

      #imgArea img { 
       display:block; 
       margin:5px; 
      } 

     </style> 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" 
     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
     crossorigin="anonymous"></script> 
     <script> 
      var onDropCallback=function(event){ 
      event.preventDefault(); 
      console.log("Droped") 
      } 

      var dragSrart=function(event){ 
      // alert("DragStarted") 
      console.log("Drag Started"); 
      } 

      var ondragoverCallback=function(event){ 
      var elem=event.target || event.srcElement; 
      $(elem).css('border',"1px solid black"); 
      } 

      var dragEndCallback=function(event){ 
      event.preventDefault(); 
      console.log("Drag End HAppened"); 
      $("#dropArea").css('border',"none"); 
      } 

     </script> 
    </head> 
    <body> 
     <div id="dropArea" ondragover="ondragoverCallback(event)" ondrop="onDropCallback(event)" ></div> 
     <div id="imgArea"> 
      <img draggable="true" ondragstart="dragSrart(event)" ondragend="dragEndCallback(event)" src="https://kazasou.files.wordpress.com/2010/08/g288.gif"> 
     </div> 
    </body> 
</html>

Mais pour une raison quelconque, même si les événements ondragstart et ondragend est congédié Je n'arrive pas à comprendre pourquoi l'événement drop ne se déclenche pas du tout. J'ai regardé https://www.w3schools.com/HTML/html5_draganddrop.asp et sur https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_draganddrop mais je ne peux pas comprendre comment différent est mon code des exemples.

Source

2017-09-20 Dimitrios Desyllas

Comme vous pouvez le voir sur: https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_draganddrop vous devez preventDefault pendant un événement dragover de sorte que le ondragoverCallback devrait avoir le code suivant:

var ondragoverCallback=function(event){ 
    event.preventDefault(); 
    var elem=event.target || event.srcElement; 
    $(elem).css('border',"1px solid black"); 
}

Source

2017-09-20 12:49:39

Html5: « ondrop » événement ne se déclenche pas quand je laisse tomber un élément

Répondre

Questions connexes