JSFiddle - React, Tailwind, and code Playground

by nilesh026

HTML

<div class="holder" id="holder">
    <div class="draggable">bread</div>  
     <div class="draggable">milk</div>  
     <div class="draggable file">cheese</div>  
     <div class="draggable">oranges</div>  
     <div class="draggable">bread</div>
</div>
<a class="trash empty">
    <div id="trash-can" class="sortable"></div>
</a>

CSS

.lefty { float: left; width: 400px; margin: 0px 50px 0px 0px; }
        .righty { float: left; width: 400px; height: 400px; overflow: auto; }
        .holder { float: left; border: 1px solid #000; width: 150px; }
        .shop-shelf { float: left; }
        #trash-can { float: left; width: 150px; min-height: 50px; padding: 0.5em; float: left; margin: 8px 10px 8px 20px; cursor: hand; cursor: pointer; border: 1px dotted red; }

        .img-float { float: right; }

        .clear-both { clear:both; }

        .droppable { float: left; width: 150px; height: 150px; padding: 0.5em; }
        .draggable { width: 100px; height: 50px; padding: 0.5em; margin: 8px 10px 8px 20px; cursor: hand; cursor: pointer; border: 1px solid #000;float:left }

        .sortable { float: left; width: 150px; min-height: 50px; padding: 0.5em; float: left; margin: 8px 10px 8px 20px; cursor: hand; cursor: pointer; border: 1px dotted red; }

JavaScript

$(function() {
    $("#holder").sortable({
        revert: true,
        update: function(event, ui) {
            var basketItems = $(this).sortable('toArray').toString();
       }
    });

    $(".file").droppable({
        hoverClass: "droppable-hover",
        drop: function(event, ui) {
            var element = ui.draggable.css('position', '');
            //element.fadeOut(1000);
            //$(ui.draggable).remove();
            $(ui.draggable).fadeOut(1000);
        }
    });
    
 $("#trash-can").droppable({
        hoverClass: "droppable-hover",
        drop: function(event, ui) {
            var element = ui.draggable.css('position', '');
            $(ui.draggable).fadeOut(1000);
        }
    });
    
    $(".draggable").draggable({
        connectToSortable: "#holder",
        revert: false
    });

});