JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cont">
    <div class="dcont">
        <p>droppable 1</p>
        <p>droppable 2</p>
    </div>
    <div class="scont">
        <p>sortable 1</p>
        <p>sortable 2</p>
        <p>sortable 3</p>
        <p>sortable 4</p>
        <p>sortable 5</p>
        <p>sortable 6</p>
        <p>sortable 7</p>
        <p>sortable 8</p>
        <p>sortable 9</p>
        <p>sortable 10</p>
        <p>sortable 11</p>
        <p>sortable 12</p>
        <p>sortable 13</p>
        <p>sortable 14</p>
    </div> 
</div>

CSS

div.cont {
    width:200px;
    height:300px;
    overflow-y:scroll;
    overflow-x: hidden;
    position:relative;
}
.scont p {
    background:gray;
    border:2px solid red;
    color:white;
    font-weight:bold;
}

.dcont p {
    background:yellow;
    border:2px solid black;
    color:black;
}

.dcont .active {
    background:green;
}

* {
    cursor:pointer;
}

JavaScript

$('.dcont p').droppable({
    hoverClass: 'active',
    drop: function() {
        alert('dropped!');
    }
});
$('.scont').sortable();