JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<div class="boxArt red">DRAG ME</div>
<div class="drop"></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;
}
.red {
    background: #f00;
}
.green {
    background: #0f0;
}

JavaScript

$('.drop').droppable({
    tolerance: 'intersect',
    drop: function (event, ui) {
        var drop_p = $(this).offset();
        var drag_p = ui.draggable.offset();
        var left_end = drop_p.left - drag_p.left + 1;
        var top_end = drop_p.top - drag_p.top + 1;
        ui.draggable.animate({
            top: '+=' + top_end,
            left: '+=' + left_end
        });
    }
});

$('.boxArt').draggable({
    revert: 'invalid',
    scroll: false,
    stack: ".boxArt"
});