JSFiddle - React, Tailwind, and code Playground

HTML

<div id='dragme' draggable='true'>dragme</div>
<div id='outer' class='drop'>
    <div id='inner' class='drop'></div>
</div>

CSS

#dragme{
    background:gray;
    top:20px;
    left:20px;
    position:absolute;
    height:20px;
}
.drop{
    background:rgba(190,0,0,.2);
    position:absolute;
}
#outer{
    top:80px;
    left:80px;
    width:200px;
    height:200px;
}
#inner{
    top:20px;
    left:20px;
    width:100px;
    height:100px;
}
.highlighted{
    outline:1px solid red;
}

JavaScript

//drag behaviour
$('#outer')
    .on('dragenter',function(e){
        $(this).addClass('highlighted')
    })
    .on('dragleave',function(e){
        $(this).removeClass('highlighted')
    })
    .on('dragover',function(e){
        e.preventDefault()
    })
$('#inner')
    .on('dragenter',function(e){
        e.stopPropagation()
    })
    .on('dragleave',function(e){
        e.stopPropagation()
    })
    .on('dragover',function(e){
        e.preventDefault()
    })

//mouse behaviour
$('#outer')
    .on('mouseenter',function(e){
        $(this).addClass('highlighted')
    })
    .on('mouseleave',function(e){
        $(this).removeClass('highlighted')
    })
    .on('mouseover',function(e){
        e.preventDefault()
    })
$('#inner')
    .on('mouseenter',function(e){
        e.stopPropagation()
    })
    .on('mouseleave',function(e){
        e.stopPropagation()
    })
    .on('mouseover',function(e){
        e.preventDefault()
    })