JSFiddle - React, Tailwind, and code Playground

by whelkaholism

HTML

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

CSS

.draggable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}
.draggable div {
    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 () {

     $(".sortable2").sortable();
     
     $(".sortable1").sortable({
         connectWith: ".sortable2"
     });
});