JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<div id="wrapper">
<div id="sortable">
<div style="height: 200px;overflow:auto">
    
    <div style="height: 300;">
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />asdfdsafa<br />
                asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />asdfdsafa<br />
                asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />asdfdsafa<br />
                asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />asdfdsafa<br />
                asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />
        asdfdsafa<br />asdfdsafa<br />
      </div>
</div>
    <div>asadf</div>
    <div>asdf</div>
</div>
</div>

CSS

#sortable div{
    border: 1px solid black;
    background-color: #666;
}

#wrapper {
    padding: 50px;
}

JavaScript

$('#sortable').sortable();

$('#sortable div').mousemove(function(e) {
    width = $(this).width();
    limit = width - 20; // 20 is the assumpion of scrollbar width
    
    if(e.offsetX < width && e.offsetX > limit) {        
        $('#sortable').sortable("disable");
    } else {
        $('#sortable').sortable("enable");
    }
});