JSFiddle - React, Tailwind, and code Playground

by Joshua Beall

HTML

<ul id='list1'>
    <li>Some</li>
    <li>Thing</li>
</ul>

<ul id='list2'>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Electric Banana</li>
    <li>Flamingo Pink</li>
</ul>

JavaScript

jQuery(document).ready(function($) {
    $('#list2 li').draggable( {
    	cursor: 'move',
    	helper: 'clone',
    });
    $('#list1 li').droppable({ drop: dropHandler });
    
    function dropHandler(event, ui){
            console.log(event);
            console.log(ui);

            var dropElement = $.clone(ui.draggable[0]);
            $(dropElement).droppable({ drop: dropHandler });
            // Get rid of the inline styles that jQuery has put on the 
            $(event.target).before(dropElement);
        }
});