JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">Parent Item
    <div class="child">First Item</div>
    <div class="child">Second Item</div>
    <div class="child">Third Item</div>
    <div class="child">Fourth Item</div>
    <div class="child">Fifth Item</div>    
</div>
<div class="dragme">Drag this to SLOWLY to First Item without triggering the hoverClass of the Parent Item (without turning it pink for a second)</div>

CSS

.parent {
padding: 0.2em 0.2em 0em 0.2em;
   background: #e0d0c0;  
}
.child {
   background: green;  
}
.dragme {
   background: yellow;
   cursor: pointer;
   margin-top: 2em;
   width: 20em;
   font-size: small;
}
.accepting_drops {
   background: #00c000;   
}
.parent.accepting_drops {
   background: #ff00ff;   
}

JavaScript

$('.dragme').draggable({
    helper: 'clone' 
});

$('.child').droppable({
    //greedy: true,
    tolerance: 'pointer',
});

$(".parent").on("dropover", function(event, ui) {
    var first = $(".child:first");
    var last = $(".child:last");
    
    if((event.originalEvent.pageX > first.offset().left) &&
        (event.originalEvent.pageY > first.offset().top) &&
        (event.originalEvent.pageX <= (last.offset().left + last.width())) &&
        (event.originalEvent.pageY <= (last.offset().top + last.height()))) {
        $(this).removeClass("accepting_drops");
    }
    else {
        $(this).addClass("accepting_drops");
        $(".child").removeClass("accepting_drops");
    }
}).on("dropout", function() {
    $(this).removeClass("accepting_drops");
});

$(".child").on("dropover", function() {
    $(".parent").removeClass("accepting_drops");
    $(".child").removeClass("accepting_drops");
    $(this).addClass("accepting_drops");
}).on("dropout", function() {
    $(this).removeClass("accepting_drops");
});