JSFiddle - React, Tailwind, and code Playground

by ilyabezp

HTML

<div id="loo">
<div id="dragg">
</div>
</div>

CSS

#dragg{position: absolute;
background:red;
height: 42px;
width: 54px;
    padding:10px;
}
#loo{width:553px;height:400px;
background:yellow
}

JavaScript

var mousemove=function (a) {

			var data=$(window).data();
			if (data.down) {
                var abc = data.pl;
                var b = abc+data.pw;
                var c = a.clientX;
                //alert(a);
                var d = data.oX;
                var f = c-d;
				$(data.el).css({
                    left: f<abc?abc:(f>b-data.w?b-data.w:f)
				})
			}
		}


		$('#dragg').on({
			mousedown: function (e) {
				$(window).data({
					down:true,
					oX: e.offsetX,
                    w: $(this).width(),
                    pl: $(this).parent().offset().left,
                    pw: $(this).parent().width(),
					el:this
				}).on('mousemove',mousemove)
			},
			mouseup: function () {
				$(window).data('down',false).off('mousemove',mousemove);
				//mouseup(this);
			}
		});