JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<h2>Draggable</h2>

<ul id="draggable">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<h2>Droppable</h2>
<ul id="droppable">
    <li>apple</li>
    <li>banana</li>
    <li>cherry</li>
</ul>

CSS

li { border: 1px solid; padding: 0.5em; margin: 0.25em; list-style: square; }

JavaScript

$( "#draggable li" ).draggable({
    helper: "clone",
});

$( "#droppable li" ).droppable({
    drop: function( event, ui ) {
        $( this ).html( $( event.originalTarget ).html() );
        $( ui.draggable ).draggable( "destroy" );
    }
});