JSFiddle - React, Tailwind, and code Playground

by ozzon91

JavaScript

document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  	}, false);


	var dragging = 0;

	$(document).on('dragenter', function(event) {
		dragging++;
		if(containsFiles(event.originalEvent)) $('.drag_area').fadeIn(255);
	});

	$(document).on('dragleave', function() {
		dragging--;
    	if (dragging === 0) {
    	    $('.drag_area').fadeOut(255);
    	}

	});

	$(document).on('drop', function(event) {
		dragging = 0;
		$('.drag_area').fadeOut(255);
		event.preventDefault();
	});

	function containsFiles(event) {
	    if (event.dataTransfer.types) {
	        for (var i = 0; i < event.dataTransfer.types.length; i++) {
	            if (event.dataTransfer.types[i] == "Files") {
	                return true;
	            }
	        }
	    }
	    
	    return false;	
	}