JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<ul id="target">
</ul>   
<ul id="source">
    <li class="elem">elem</li>
    <li class="elem">elem</li>
</ul>

CSS

#target, #source{
    min-height:100px;
    min-width:100px;
    border:solid 1px #ff5e99;
}

JavaScript

jQuery.fn.clone = function( dataAndEvents, deepDataAndEvents ) {
      dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
      deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;

      return this.map( function () {
         return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
      });
  };

var dragOpts = {
    revert:'invalid',
    helper:'clone',
    cursor:'move',
    containment: 'document',
    activeClass: "ui-state-highlight"
};
$("#target").droppable({
    accept: 'ul#source li.elem',
    drop:function( e, ui ){
         
        console.group( 'drop' );
        console.log( this );
        console.log( e );
        console.log( ui );
        console.groupEnd( 'drop' );
        var self = $( this ),
            newElem = ui.draggable;
        newElem.fadeOut(function(){ $(this).appendTo( self ).fadeIn()});
        return true;
    }
});

$("li.elem").draggable( dragOpts );