JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

<div id="score">&nbsp;</div>

<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>

CSS

#score
{
    height:50px;
}

.myDiv
{
    width:40px;
    height:40px;
    margin:10px;
    border:1px solid #000000;
    float:left;
    cursor:pointer;
    text-align:center;
    line-height:40px;
    position:relative;
    top:0;
    left:0;
}

JavaScript

var adjusted = false;
$(".myDiv").draggable({
    start: function () {
        ImmagineDrag = $(this);
        startImageX = ImmagineDrag.position().top;
        startImageY = ImmagineDrag.position().left;
    },
    drag: function () {
        currentImageX = ImmagineDrag.position().top;
        currentImageY = ImmagineDrag.position().left;
        
        $('#score').html(currentImageX);

        if(currentImageX > 200) {
            if (!adjusted) {
                adjusted = true;
                drg = ImmagineDrag.data("draggable");
                ctop = drg.offset.click.top;
                cleft = drg.offset.click.left;
                newtop = currentImageX - startImageX + ctop;
                newleft = currentImageY - startImageY + cleft;
                drg._adjustOffsetFromHelper({top:newtop-12,left:newleft});
            }
        }            
    },
    stop: function () {
    }
});