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>
        </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

$(document).ready(function(){
    $(".left ul li").draggable({
        refreshPosition: true,
        revert: true
    });
    
    $(".right li").droppable({
        drop:	function(e, ui){
            alert(ui.draggable.text()+" "+$(this).text());
        }
    });
    
});