JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<div id="origin" class="wrap">
    <p class="magnet magnet-in-menu">&nbsp;</p>
    <p class="magnet magnet-in-menu">&nbsp;</p>
    <p class="magnet magnet-in-menu">&nbsp;</p>
    <p class="magnet magnet-in-menu">&nbsp;</p>
    <p class="magnet magnet-in-menu">&nbsp;</p>
    <p class="magnet magnet-in-menu">&nbsp;</p>
    <p class="magnet magnet-in-menu">&nbsp;</p>
    <p class="magnet magnet-in-menu">&nbsp;</p>
</div>
<div id="target" class="wrap"></div>

CSS

.magnet {
    background:#ccc;
    border:1px solid #888;
    display:inline-block;
    height:50px;
    margin:5px;
    width:50px;
}
.wrap {
    display:block;
    float:left;
    margin:20px;
    height:200px;
    width:45%;
}
#origin {
    background:rgba(255, 0, 0, 0.5);
}
#target {
    background:rgba(0, 255, 0, 0.5);
}

JavaScript

$(".magnet").draggable({
    revert: 'invalid',
    appendTo: '#fridge',
    scroll: false
});

$(".magnet-in-menu").each(function (elem) {
    $(this).draggable("option", "helper", 'clone');

    // can't use .width() and .height() before images load
    var width = parseInt($(this).css('width'),10);
    var height = parseInt($(this).css('height'),10);
    $(this).draggable("option", "cursorAt", {
        'top': height / 2,
        'left': width / 2
    });
});
$("#target").droppable({
    drop: function (event, ui) {
        $(this).addClass('dropped');

        // if we've got a clone,
        // we need to actually save it and put it where it belongs
        if (ui.draggable.hasClass('magnet-in-menu')) {
            var clone = ui.draggable;
            clone.appendTo(this);

            var width = clone.width();
            var height = clone.height();
            clone.offset({
                'top': event.pageY - height / 2,
                'left': event.pageX - width / 2
            });
            clone.removeClass('magnet-in-menu');
            // remove "clone" helper 'cause it causes more trouble than it's worth
            clone.draggable("option", "helper", 'original');
        }
    }
});