JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <script src="https://github.com/jquery/jquery-ui/raw/master/tests/jquery.simulate.js"></script>
</head>    
<body>
    <div id="goodContainer">
        <div class="dnd">one</div>
        <div class="dnd" id="good">two</div>        
    </div>
    <div id="badContainer">
        <div class="dnd">one</div>
        <div class="dnd" id="bad">two</div>        
    </div>
</body>    
</html>

CSS

.dnd
{
    width:100px;
    height:100px;
    background:grey;
    margin:5px;
}

#goodContainer
{
    float:left;
}

#badContainer
{
    height:125px;
    overflow:scroll;
}

JavaScript

$(".dnd").draggable();
$(".dnd").droppable({drop: function(){alert("dropped!");},
               tolerance: 'pointer'});

$("#good").simulate("drag", {dx:0,dy:-60});
$("#badContainer").scrollTop(25);
$("#bad").simulate("drag", {dx:0,dy:-60});