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>
 <div class="col">
    <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 {
    padding:15px;
    overflow:hidden;
}
#list1, #list2, #list3 {
    padding:10px;
    margin-bottom:20px;
    background:#ccc;
}
#list2 {
    background:#aaa;
}
#list3 {
    background:#999;
}
.wrapper, .item {
    display:block;
}
.item {
    background:#fff;
    padding:2px 5px 2px 0;
    margin-right:2px;
}
.handle {
    background:#eee;
    padding:2px 5px;
    margin-right:2px;
}

JavaScript

$("#list1, #list2, #list3").sortable({
    items: ".item",
    connectWith: ".connect",
    handle: ".handle",
    revert: true,
    over: function(event, ui){
        console.info("over");
    },
    out: function(event, ui){
        console.info("out");
    }
});