JSFiddle - React, Tailwind, and code Playground

by g33ky

HTML

<ul id="sortable1" class="connectedSortable">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>
<ul id="sortable2" class="connectedSortable">
   

</ul>

CSS

#sortable1 li.item{
    list-style:none;
    width:100px;
    background:#eeeeee;
    color:#000000;
    border: 1px solid #000000;
    padding:3px;
    margin:10px auto;
    cursor:move;
    text-align:center;
    font-weight:500;
    font-style:normal;
}

#sortable2 li.item{
    list-style:none;
    width:100px;
    background:#006699;
    color:#FFFFFF;
    border: 1px solid #000000;
    padding:3px;
    margin:10px auto;
    cursor:move;
    text-align:center;
 
}



.connectedSortable{
    float:left;
    width:120px;
    height:300px;
    border:1px solid #006699;
    list-style:none;
    margin:5px;
}

JavaScript

$(function () {
     $("#sortable1, #sortable2").sortable({
         connectWith: ".connectedSortable"
     }).disableSelection();
 });