JSFiddle - React, Tailwind, and code Playground

by raad

HTML

<div id="col1">
    <h1>column 1</h1>
    <ul id="column1" class="column">
        <li id="1" class="item">
             <h3 rel="1">item1</h3>
        </li>
        <li id="2" class="item">
             <h3 rel="1">item2</h3>
        </li>
        <li id="3" class="item">
             <h3 rel="1">item3</h3>
        </li>
    </ul>
</div>

<div id="col2">
    <h1>column 2</h1>
    <ul id="column2" class="column">
        <li id="4" class="item">
             <h3 rel="0">item4</h3>
        </li>
        <li id="5" class="item">
             <h3 rel="0">item5</h3>
        </li>
        <li id="6" class="item">
             <h3 rel="0">item6</h3>
        </li>
    </ul>
</div>

CSS

body {
    margin: 10px;
}
h1 {
    font-size: 12pt;
    font-weight: bold;
}
#col1 {
    float: left;
}
#col2 {
    float: right;
}
.column {
    width: 220px;
    min-height: 20px;
    border: solid 1px #eef;
    text-align: center;
}
.column ul, .column li, li.item {
    list-style: none;
    list-style-type: none;
}
.column ul {
    margin: 4px;
    padding: 2px;
}
li.item, .widget-placeholder {
    margin: 5px;    
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}
.widget-placeholder {
    border: dotted 1px #88f;   
}
#column1 .widget-placeholder {
    z-index: 1;
}
#column2 .widget-placeholder {
    z-index: 5;
}
li.item {
    background-color: #eef;
    border: 1px solid #ccf;
    font-size: 16px;
    line-height: 20px;
}
li:not(.ui-sortable-helper) {
    cursor: hand;
    cursor: pointer;
}
.item:hover {
    color: purple;
}

JavaScript

$(".column").sortable({
    connectWith: $(".column"),
    placeholder: "widget-placeholder",
    forcePlaceholderSize: true,
    cursor: "move",
    helper: "clone",
    dropOnEmpty: true,
    zIndex: 10
});

$("#column2").on("sortreceive", function (event, ui) {
    ui.item.find("h3").attr("rel", "0");
});

$("#column2").on("sortremove", function (event, ui) {
    ui.item.find("h3").attr("rel", "1");
});