CODEWITHSUNDEEP
javascripthtmldrag-and-drop
Wagner Vieira
Wagner Vieira

Reputation: 451

Drop event not firing even with event.preventDefault on dragenter and dragover

I'm struggling to get ondrop event firing. It doesn't fire even when calling event.preventDefault on dragenter and dragover. Actually only onDragEnter it's being fired.

style

.drop_zone {
 border: 5px black dashed;
 width: 300px;
 height: 200px;
}

 HTML
<body>
    <div class="drop_zone" 
        ondragenter="onDragEnter(event)"
        ondragover="onDragOver(event)"
        ondrop="onDrop(event)" >
        <p>Drag one or more files to this Drop Zone ...</p>
    </div>
    <script src="./index.js"></script>
</body>

javascript
function onDrop(e){
    e.preventDefault();
}

function onDragEnter(e){
    e.preventDefault();
}

function onDragOver(e){
    e.preventDefault();
}

Upvotes: 0

Views: 2029

Answers (2)

Wagner Vieira
Wagner Vieira

Reputation: 451

thanks for your help.

Actually the event it is being fired. It's a console bug. I set a debugger and a breakpoint within the onDropHandler method but it didn't hit them. But if I use a console.log as below it show me object.

function onDrop(e){
    console.log(e);
    console.log(e.dataTransfer.files[0])
    e.preventDefault();
}

Upvotes: 0

3146Hardik bhanderi
3146Hardik bhanderi

Reputation: 11

$(document).ready(function() {
    var holder = document.getElementById('holder');
    holder.ondragover = function () { this.className = 'hover'; return false; };
    holder.ondrop = function (e) {
      this.className = 'hidden';
      e.preventDefault();
      var file = e.dataTransfer.files[0];
      var reader = new FileReader();
      reader.onload = function (event) {
          document.getElementById('image_droped').className='visible'
          $('#image_droped').attr('src', event.target.result);
      }
      reader.readAsDataURL(file);
    };
});
.holder_default {
    width:500px; 
    height:150px; 
    border: 3px dashed #ccc;
}

#holder.hover { 
    width:400px; 
    height:150px; 
    border: 3px dashed #0c0 !important; 
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}
<!DOCTYPE html>

<html>
    <head>
        <title> HTML 5 </title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
    </head>
    <body>
      <form method="post" action="http://example.com/">
        <div id="holder" style="" id="holder" class="holder_default">
          <img src="" id="image_droped" width="200" style="border: 3px dashed #7A97FC;" class=" hidden"/>
        </div>
      </form>
    </body>
</html>

Upvotes: 1

Related Questions