JSFiddle - React, Tailwind, and code Playground

by melon

HTML

<div class="row">
    <div class="box_outer"><div class="box" id="box1"><!-- --></div></div> 
    <div class="box_outer"><div class="box" id="box2"><!-- --></div></div> 
    <div class="box_outer"><div class="box" id="box3"><!-- --></div></div>     
</div>

CSS

.row {
    margin: 20px;            
}
.box_outer{
   border: 1px solid grey;
   padding: 3px;   
   margin-right: 20px;
   float: left;
}
.box_active{
    border: 1px solid blue;
}
.box {
    width: 200px;
    height: 200px;
}
#box1 {
    background: red;
}
#box2 {
    background: yellow;
}
#box3 {
    background: green;
}

JavaScript

$(document).ready(function() {
    
    $(".box").draggable({
        helper:'clone',
        snap: ".box",
        snapMode: 'inner',
        snapTolerance: 20,
        zIndex: '5000',  
        opacity: 1,
        revert:  function(dropped) {
            //Revert if only valid
            var dropped = dropped && $(this).is(dropped.droppable('option', 'accept'));
            return !dropped;      
        }, 
        start: function(event,ui) {
        },
        stop: function(event,ui) {    
            //Remove active in case multiple ones were highlighted
            $('.box_outer').removeClass('box_active');  
        },
        drag: function(event, ui) {    
        }
    }); 
    
    
    $(".box").droppable({
        tolerance: 'intersect',
        accept: ".box",
        drop: function(event,ui){
            //Remove active
            $(this).parent('.box_outer').removeClass('box_active');
            
        },
        over: function(event, ui) {        
            //Add active
            $(this).parent('.box_outer').addClass('box_active');
            
        },
        out: function(event, ui) {
            //Remove active
            $(this).parent('.box_outer').removeClass('box_active');
        }
    });

});