JSFiddle - React, Tailwind, and code Playground

by jcano

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="container">
    <div class="list">
        <div class="element" style="top: 0px;">text 1</div>
        <div class="element" style="top: 111px;">text 2</div>
        <div class="element" style="top: 222px;">text 3</div>
        <div class="element" style="top: 333px;">text 4</div>
        <div class="element" style="top: 444px;">text 5</div>
        <div class="element" style="top: 555px;">text 6</div>
    </div>
</div>

CSS

.container {
    overflow: hidden;
    min-height: 300px;
    height: 300px;
    width: 300px;
    max-height: 150px;
}
.list {
    position: relative;
    overflow-y: scroll;    
    height: 100%;
    width: 250px;
}

.element {
    position: absolute;
    
    height: 100px;
    width: 200px;
    
    padding: 5px;
    
    border-bottom: 1px white solid;
    
    background-color: #59BBDF;
    color: white; 
    text-align: center;
}

JavaScript

$(function(){
    $(".element").draggable({
        helper: "clone",
        containment: "document",
        tolerance: "pointer"
    });
})