JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<div id="draggable">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sit voluptas aut et illo dolore atque ullam possimus laudantium odit! Placeat modi a autem nobis quod blanditiis fugit id temporibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis aperiam dicta ad quasi impedit natus sequi vitae reprehenderit rem fuga unde quam nam cupiditate dignissimos necessitatibus nisi saepe iste culpa.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat aspernatur neque laborum cum dolorum consequatur ducimus similique atque eveniet accusantium dicta ea dignissimos velit laudantium nostrum corporis soluta odit rerum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis officia consequatur ipsam quis explicabo error eum ipsum nobis similique recusandae vero illo illum animi veritatis amet necessitatibus consectetur. Tempora vero!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime reprehenderit vitae quos porro. Sunt voluptates maxime fugiat vero animi sint ea ipsa dolor iusto deleniti laudantium quaerat nostrum suscipit ad.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores repellendus porro quidem facilis accusamus officiis est quibusdam cupiditate fuga perferendis sequi aspernatur possimus ipsa eveniet minima itaque exercitationem voluptatibus voluptates!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aliquid nisi eaque amet quod veritatis perferendis in illo quia illum? Iure ducimus eos blanditiis esse recusandae debitis sed amet sit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quidem obcaecati debitis rerum voluptate vitae tenetur! Pariatur officia quos cupiditate iure officiis neque vitae explicabo ullam quae ut! Quae sint.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam nemo vel nulla laudantium architecto maiores dolore...

CSS

#draggable {
    height: 300px;
    width: 280px;
    overflow: auto;
    margin: auto;
}

JavaScript

var startDragX,
    startDragY;

$('#draggable').draggable({
    axis: 'x',
    revert: true,
    //helper: 'clone',
    start: function(e){
        
        // get starting point of the drag
        startDragX = e.pageX;
        startDragY = e.pageY;
    },
    drag: function(e, ui){
        
        // prevent drag until user has moved 30px horizontally
        if (Math.abs(e.pageX - startDragX) < 30){
            ui.position.left = 0;
        } else {
            if (ui.position.left < 0) {
                
                // left drag
                ui.position.left = ui.position.left + 30;
            } else {
                // right drag
                ui.position.left = ui.position.left - 30;
            }
        }
    }
});