JSFiddle - React, Tailwind, and code Playground

HTML

With overlay:                                            
                                                         
<div class="dropzone">                                   
    <span>&nbsp;</span>                                  
    <span>&nbsp;</span>                                  
    <span>&nbsp;</span>                                  
    <span>&nbsp;</span>                                  
    <span>&nbsp;</span>                                  
    <span>&nbsp;</span>                                  
    <span>&nbsp;</span>                                  
    <span>&nbsp;</span>                                  
    <span>&nbsp;</span>                                  
    <div class="overlay"></div>                          
</div>                                                   
                                                         
With pointer events inside container:                    
                                                         
<div>                                                    
    <div>                                                
        <div class="dropzone no-pointer-events">         
            <span>&nbsp;</span>                          
            <span>&nbsp;</span>                          
            <span>&nbsp;</span>                          
            <span>&nbsp;</span>                          
            <span>&nbsp;</span>                          
            <span>&nbsp;</span>                          
            <span>&nbsp;</span>                          
            <span>&nbsp;</span>                          
            <span>&nbsp;</span>                          
        </div>                                           
    </div>                                               
</div>                                                   
                                                         
Without anything:                                        
                         ...

CSS

div.dropzone {
    background-color: #cccccc;
    position:         relative;
    width:            150px;
    height:           150px;
    margin:           20px;
}

div.dropzone.no-pointer-events > * {
    pointer-events: none;
}

div.dropzone.highlighted {
    background-color: #666666;
}

div.dropzone > div.overlay {
    position: absolute;
    left:     0;
    right:    0;
    top:      0;
    bottom:   0;
}

div.dropzone > span {
    background-color: #999999;
    opacity:          0.25;
    float:            left;
    width:            50px;
    height:           50px;
}

div.dropzone > span.highlighted {
    opacity: 1;
}

body.no-drag-and-drop {
    cursor:           pointer;
    background-color: rgba(255, 0, 0, 0.1);
}

JavaScript

// jQuery event configuration.
$.event.props.push('dataTransfer', 'pageX', 'pageY');

function showNoDragAndDrop() {
    var bodyElement = $('body');

    // Already set…
    if (bodyElement.is('.no-drag-and-drop')) {
        return;
    }

    // Custom message about no dragging here…
    bodyElement.addClass('no-drag-and-drop');

    console.log('On: invalid drag area...');
}

function hideNoDragAndDrop() {
    var bodyElement = $('body');

    // Already unset…
    if (!bodyElement.is('.no-drag-and-drop')) {
        return;
    }

    // Custom message about no dragging here…
    bodyElement.removeClass('no-drag-and-drop');

    console.log('Off: invalid drag area...');
}

function updateDragAndDropStatus(currentElement, mouseX, mouseY) {
    if (currentElement == null) {
        hideNoDragAndDrop();
        return;
    }

    var element = $(currentElement).closest('div.dropzone');

    if (element.length !== 0) {
        var elementPosition = element.offset();
        var elementWidth = element.width();
        var elementHeight = element.height();

        if (mouseX >= elementPosition.left && mouseX <= elementPosition.left + elementWidth && mouseY >= elementPosition.top && mouseY <= elementPosition.top + elementHeight) {
            hideNoDragAndDrop();
            return;
        }
    }

    showNoDragAndDrop();
}

$('div.dropzone')
    .on('dragenter', function (event) {
        $(event.currentTarget).addClass('highlighted');
        $(event.target).addClass('highlighted');
    })
    .on('dragleave', function (event) {
        $(event.currentTarget).removeClass('highlighted');
        $(event.target).removeClass('highlighted');
    });

// Storing this value we huuuuuuugely reduce the number of processor time on repetitive calls…
var lastDragoverElement = null;

jQuery(document)
    .on('dragover', function (event) {
        if (lastDragoverElement !== event.target) {
            updateDragAndDropStatus(lastDragoverElement = event.target, event.pageX,...