JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable" style="width:100px;height:100px;overflow:auto;">
  <div class="content" style="width:80px;height:80px;">
    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
  </div>
</div>

JavaScript

$(function() {

    $(".draggable").draggable({
        start: function(event) {
            var content = $(this).children('.content');
            
            // if we're scrolling, don't start and cancel drag
            if (event.originalEvent.pageX-content.offset().left > content.innerWidth())
            {
                console.log('should-cancel');
                $(this).trigger("mouseup");
                return false;
            }
        }
    });

});