JSFiddle - React, Tailwind, and code Playground

by Edgar Martinez

HTML

<section id="trailer">
<div class="drop">
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>
</section>
<br>
    <div class="drag"></div>
    <div class="drag"></div>

CSS

.drop { display:inline-block; width:300px; height:200px; border:1px solid silver; background-color:whitesmoke; padding:10px; }

.drag { display:inline-block; width:30px; height:30px; border:1px solid silver; background-color:red; }

JavaScript

$('.drop').droppable({
    tolerance: 'fit'
});

$('.drag').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
});

$('.drag').droppable({
    greedy: true,
    tolerance: 'touch',
    containment: "parent",
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});