JSFiddle - React, Tailwind, and code Playground

by fordlover49

HTML

<div class="draggable" style="width:100px;height:100px;">
  <div id="content" style="width:80px;height:80px;overflow:auto;">
    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() {
            // if we're scrolling, don't start and cancel drag
            if ($(this).data("scrolled")) {
                $(this).data("scrolled", false).trigger("mouseup");
                return false;
            }
        }
    }).find("*").andSelf().scroll(function() {               
        // bind to the scroll event on current elements, and all children.
        //  we have to bind to all of them, because scroll doesn't propagate.
        
        //set a scrolled data variable for any parents that are draggable, so they don't drag on scroll.
        $(this).parents(".ui-draggable").data("scrolled", true);
        
    });

});