JSFiddle - React, Tailwind, and code Playground

HTML

<br />
<br />
<Br />
<div class="left">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
<div class="right">
    <div class="top">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
        </ul>
    </div>
    <div class="bottom">
        <ul class="leftList">
            <li>H</li>
            <li>J</li>
            <li>K</li>
        </ul>
    </div>
</div>

CSS

.left {
    float:left;
    width:50%;
}
.right {
    float:left;
    width:50%;
}
.top {
    height:100px;
    overflow-y:scroll;
}

JavaScript

$.widget('ui.droppable', $.ui.droppable, {

    _over: function (e, ui) {
        var draggable = $.ui.ddmanager.current;
        if (!draggable || (draggable.currentItem || draggable.element)[0] == this.element[0]) return; // Bail if draggable and droppable are same element

        // this to make sure the droppable is visible
        this.scrollVisible = this._isScrollIntoView();

        if (this.accept.call(this.element[0], (draggable.currentItem || draggable.element)) && (!this.options.scrollable || this.scrollVisible)) {

            if (this.options.hoverClass) {
                this.element.addClass(this.options.hoverClass);
            }
            // to activate scrollable you need to change scrollParent of the draggable
            // and adjust some calculations
            if (this.options.scrollable) {
                draggable.overflowOffset = $(this.element).scrollParent().offset();
                draggable.scrollParent = $(this.element).scrollParent();
                draggable.offsetParent = $(this.element).scrollParent();
                draggable.offset.parent.top = $(this.element).scrollParent().scrollTop();
            }
            this._trigger('over', event, this.ui(draggable));
        }


    },
    _out: function (event) {

        this._super();
        var draggable = $.ui.ddmanager.current;
		
        // remove scrollable 
        if (this.options.scrollable) {
            draggable.scrollParent = $(document);
            draggable.offsetParent = $(document);
            draggable.overflowOffset = $(document).offset();
            draggable.offset.parent.top = $(document).scrollTop();
        }
    },
    _drop: function (event, custom) {

        var draggable = custom || $.ui.ddmanager.current;
        if (!draggable || (draggable.currentItem || draggable.element)[0] == this.element[0]) return false; // Bail if draggable and droppable are same element

        var childrenIntersection = false;
       ...