JSFiddle - React, Tailwind, and code Playground

by Christopher O

HTML

<div id="box">
    <div id="drop-mask"></div>
    <div class="children">+</div>
    <div class="children">+</div>
    <div class="children">+</div>
</div>
<span>Try dragging some file inside</span>

CSS

#box {
    width:200px;
    height:200px;
    border: 2px dashed #333;
    margin:20px;
}

#box.hover {
    background:#eee;
    border: 2px dashed #000;
}

#drop-mask {
    position:absolute;
    width:204px;
    height:204px;
    z-index:99;
    display:none;
    margin:-2px;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
}

#box .children {
    font-size:50pt;
}

JavaScript

console.clear();
   
   var drag_over = function(e) {
        e.stopPropagation();
        e.preventDefault();
			$('#box').addClass('hover');
			$('#drop-mask').show();
      console.log(event.type + ": " + event.currentTarget.id + " -> " + event.target.id);
    };
	
    var drag_leave = function(e) {
        e.stopPropagation();
        e.preventDefault();
			$('#box').removeClass('hover');
			$('#drop-mask').hide();
      console.log(event.type + ": " + event.currentTarget.id + " -> " + event.target.id);
    };
	
	
	var drag_drop = function(e){
        e.stopPropagation();
        e.preventDefault();	
		$('#box').removeClass('hover');
		$('#drop-mask').hide();
    console.log(event.type + ": " + event.currentTarget.id + " -> " + event.target.id);
	};
    
    var overArea = document.getElementById('box');
    var dropMask = document.getElementById('drop-mask');
    
	overArea.addEventListener('dragover', drag_over, false);
	dropMask.addEventListener('dragleave', drag_leave, false);
    dropMask.addEventListener('drop', drag_drop, false);