JSFiddle - React, Tailwind, and code Playground

by wahyu

HTML

<ul id="draggables">
    <li>Draggable 1</li>
    <li>Draggable 2</li>
    <li>Draggable 3</li>
</ul>
<br>
<div id="sortable">
    <div>Existing element</div>
    <div>Another existing element</div>
</div>

CSS

body { 
    font-size: 13px;
    line-height: 1.231;
    font-family: Arial, Verdana, sans-serif;
    color: #222;
    padding: 25px;
}

JavaScript

$('#sortable').sortable();
$('#sortable').droppable({
    drop: function(ev, ui){
        $(ui.draggable).html('<div>' + ui.draggable.text() + '</div>');
    }
});
$('#draggables li').draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    revert: 'invalid',
    cursor: 'move'
});