JSFiddle - React, Tailwind, and code Playground

by pk7_diego

HTML

<div id="box">
    <div id="drop-mask"></div>
    <div class="children">+</div>
</div>

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:inherit;
    height:inherit;
    z-index:99;
    display:none;
}

#box .children {
    font-size:50pt;
    margin:55px 80px;;
}

JavaScript

var drag_over = function(e) {
        e.stopPropagation();
        e.preventDefault();
		$('#box').addClass('hover');
		$('#drop-mask').show();
    };
	
    var drag_leave = function(e) {
        e.stopPropagation();
        e.preventDefault();
		$('#box').removeClass('hover');
		$('#drop-mask').hide();
    };
	
	
	var drag_drop = function(e){
        e.stopPropagation();
        e.preventDefault();	
		$('#box-a').removeClass('hover');
		$('#drop-mask').hide();
	};
    
    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);