JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<div style="display:inline-block">
<div id="List1">
        <div>Item1</div>
        <div>Item2</div>
        <div>Item3</div>
        <div>Item4</div>
        <div>Item5</div>
        <div>Item6</div>
        <div>Item7</div>
        <div>Item8</div>
        <div>Item9</div>
    </div>

    <div id="List2">
        <div>Item1</div>
        <div>Item2</div>
        <div>Item3</div>
        <div>Item4</div>
        <div>Item5</div>
        <div>Item6</div>
        <div>Item7</div>
        <div>Item8</div>
        <div>Item9</div>
    </div>
</div>

CSS

#List1, #List2
{
    height: 300px;
    width: 200px;
    overflow: auto;
    border: solid 2px black;
    margin-bottom: 20px;
    float:left;
    margin:10px;
}

#List1 > DIV, #List2 > DIV
{
    height: 50px;
    border: solid 1px red;
}

JavaScript

$(function() {
    var sortlists = $("#List1, #List2").sortable({
        tolerance: 'pointer',
        connectWith: '#List1, #List2',
        helper: 'original',
        scroll: true
    }).on('scroll', function() {
     sortlists.scrollTop($(this).scrollTop());
});
});