JSFiddle - React, Tailwind, and code Playground

by phoebebright

HTML

<div class="drop">Can drop here
    <div id="nogo">Can't drop here</div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>

CSS

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

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

#nogo {width: 100px; height:100px; margin:100px; 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',
    drop: function(event, ui) {
        ui.draggable.draggable('option', 'revert', true);
    }
});