JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drop">
    <div class="boxArt">DRAG ME</div>
</div>
<div class="drop">
    <div class="boxArt">DRAG ME</div>
</div>

CSS

.drop {
    width:155px;
    height:200px;
    border:1px solid #0C5F8B;
    margin-top:30px;
    margin-left:34px;
    float:left;
}
.boxArt {
    width:155px;
    height:200px;
    background:#CCC;
}

JavaScript

$('.drop').droppable({
    tolerance: 'intersect',
});
    
$('.boxArt').draggable({
    revert: 'invalid',
    scroll: false,
    stop: function(){
        $(this).draggable('option','revert','invalid');
        $(this).css("z-index","0");
    }
});
    
$('.boxArt').mousedown(function() {
    $(this).css("z-index","10");
});