JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<div class="borderbl"><div id="block"></div></div>

CSS

#block {
    width: 150px;
    height: 150px;
    border: 1px solid #900;
    position: relative;
}

.borderbl {
    width: 300px;
    height: 300px;
    background: green;
}

JavaScript

var wbbl = $('.borderbl').width();
var wbl = $('#block').width();
$('.borderbl').click(function(e){
        var eleft = e.pageX;
        if (eleft < wbbl - wbl){
            $('#block').stop().animate({left:eleft,})
        }
        else {
            $('#block').stop().animate({left: wbbl - wbl,})
        }
});