JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<div id="drop"></div>

CSS

#drop {
   height: 300px;
   width: 300px;
   border: 1px solid red; 
}

JavaScript

jQuery.event.fixHooks.drop = { props: [ "dataTransfer" ] };

$(function(){ 
    function dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
    }
    function dragover(e) {
        e.stopPropagation();
        e.preventDefault();
    }    
    function drop(e) {
        e.stopPropagation();
        e.preventDefault();
        console.log(e);
        console.log(e.dataTransfer);
        console.log(e.dataTransfer.files);
    }
        
    $('#drop').bind('dragenter', dragenter);
    $('#drop').bind('dragover', dragover);
    $('#drop').bind('drop', drop);    
});