JSFiddle - React, Tailwind, and code Playground

HTML

<div class="holes">
    <div class="js-drop js-pos11 one"></div>
    <div class="js-drop js-pos24 two"></div>
    <div class="js-drop js-pos58 three"></div>
</div>
<div class="balls">
    <div class="js-drag ball" data-target="three">green</div>
    <div class="js-drag ball" data-target="one">red</div>
    <div class="js-drag ball" data-target="two">blue</div>
</div>
<input name="click" type="button" value="Move 'em!" />

CSS

.holes {
    position:absolute;
    bottom:0;
    right:0;
}
.balls {
    position:absolute;
    top:4em;
    left:0;
}
.balls div {
    background:yellow;
    opacity:0.25;
}
.balls div, .holes div {
    width:50px;
    height:50px;
    float:left;
    outline: 2px solid black;
    margin:1em;
}
.one {
    background:red;
}
.two {
    background:blue;
}
.three {
    background:green;
}

JavaScript

$(".js-drop").droppable({
    tolerance: "fit",
    drop: function (event, ui) {
        //FIXME this should be triggered after click on button
        console.log("ok");
        alert("ok");
    }
});
$(".js-drag").draggable({
    snap: ".js-drop",
    snapMode: "inner",
    snapTolerance: 50
});

$("[name='click']").on("click", function () {
    $(".js-drag").each(function () {
        $(this).position({
            of: "." + $(this).data("target")
        });
    });
    drop_function();
});

var drop_function = $(".js-drop").droppable('option', 'drop');