JSFiddle - React, Tailwind, and code Playground

by solidsource

HTML

<div class="col">
    <div id="list1" class="connect">
        <span class="wrapper"><span class="item"><span class="handle">H</span>item 11</span></span>
        <span class="wrapper"><span class="item"><span class="handle">H</span>item 12</span></span>
    </div>
    <div id="list2" class="connect">
        <span class="wrapper"><span class="item"><span class="handle">H</span>item 21</span></span>
        <span class="wrapper"><span class="item"><span class="handle">H</span>item 22</span></span>
    </div>
</div>
<div class="col">
    <div id="list3" class="connect">
        <span class="wrapper"><span class="item"><span class="handle">H</span>item 31</span></span>
        <span class="wrapper"><span class="item"><span class="handle">H</span>item 32</span></span>
    </div>
</div>

CSS

.col {
    float:left;
    padding:0 15px;
    overflow:hidden;
}
#list1, #list2, #list3 {
    padding:10px;
    margin-bottom:20px;
    background:#ccc;
}
#list2 {
    background:#aaa;
}
#list3 {
    background:#999;
}
.connect .wrapper, .connect .item {
    display:block;
}
.connect .item {
    background:#fff;
    padding:2px 5px 2px 0;
    margin-right:2px;
}
.connect .handle {
    background:#eee;
    padding:2px 5px;
    margin-right:2px;
}

JavaScript

$("#list1, #list2, #list3").sortable({
    cursor: "move",
    items: ".item",
    connectWith: ".connect",
    opacity: 0.6,
    revert: true,
    scroll: false,
    helper: "clone",
    handle: ".handle",
    tolerance: "pointer",
    over: function(event, ui) {
        console.log("out", $(this).find(".item").text());
    },
    out: function(event, ui) {
        console.info("over", $(this).find(".item").text());
    }
});