JSFiddle - React, Tailwind, and code Playground

by jasonnathan

HTML

<ul id="sortable1">
    <li class="ui-state-default">Draggable 1</li>
    <li class="ui-state-default">Draggable 2</li>
    <li class="ui-state-default">Draggable 3</li>
    <li class="ui-state-default">Draggable 4</li>
    <li class="ui-state-default">Draggable 5</li>
</ul>
<ul id="sortable2">
    <li class="ui-state-highlight">Item 1</li>
    <li class="ui-state-highlight">Item 2</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
</ul>

CSS

.draggable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}
.draggable li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    height: 1.5em;
}
.droppable {
    border:1px solid red;
    margin-top:20px;
    padding:20px
}

JavaScript

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