JSFiddle - React, Tailwind, and code Playground

by itdiver

HTML

<div class="shop-container">
                <ul>
                <li class="draggable" id="bread">
            bread<img src="bread.png" class="img-float">
            </li>
                <li class="draggable" id="milk">
            milk<img src="milk.jpg" class="img-float">
            </li>
                <li class="draggable" id="cheese">
            cheese<img src="cheese.gif" class="img-float">
            </li>
                <li class="draggable" id="oranges">
            oranges<img src="orange.gif" class="img-float">
            </li>
                </ul>

            </div>
            <div class="shop-container">
                <ul>
                <li class="draggable" id="bread">
            Beep1 <img src="bread.png" class="img-float">
            </li>
                <li class="draggable" id="milk">
            Beep2 <img src="milk.jpg" class="img-float">
            </li>
                <li class="draggable" id="cheese">
            Beep3 <img src="cheese.gif" class="img-float">
            </li>
                <li class="draggable" id="oranges">
            Beep4 <img src="orange.gif" class="img-float">
            </li>
                </ul>

            </div>

            <ul id="sortable" class="sortable">sortableA</ul>
            <ul id="sortable2" class="sortable">sortableB</ul>
            <ul id="trash-can" class="sortable">Trash can</ul>

CSS

.lefty { float: left; width: 400px; margin: 0px 50px 0px 0px; }
        .righty { float: left; width: 400px; height: 400px; overflow: auto; }
        .shop-container { 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; float: left; }
        .draggable { width: 100px; height: 50px; padding: 0.5em; margin: 8px 10px 8px 20px; cursor: hand; cursor: pointer; border: 1px solid #000; }

        .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; }

        ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
        li { margin: 5px; padding: 5px; width: 150px; height: 45px; }

JavaScript

$(function() {
   $( "#sortable, #sortable2" ).sortable({ revert: true,
    
       update: function( event, ui ) {

           var basketItems = $(this).sortable('toArray').toString();
        $.jnotify(basketItems, 5000);

           //alert(basketItems);
           //$.get('updatebasket.cfm', {basketItems:basketItems});

       }

   }).draggable({
       connectToSortable: "#trash-can",
       //helper: "clone",
        snap: true,
       revert: "invalid"

   });
    $("#trash-can").droppable({
        hoverClass: "droppable-hover",
        drop: function ( event, ui) {
        //$(this).append(ui.draggable);


            var element = ui.draggable;
            $(this).append(element);
            //element.fadeOut(1000);
            //$(ui.draggable).remove();

            $(ui.draggable).fadeOut(1000);

/*
            var element = $(ui.draggable).clone();
            $(this).append(element);
            element.fadeOut(1000);
            $(ui.draggable).remove();
*/            
        }
        

    });

   $( ".draggable" ).draggable({
       connectToSortable: "#sortable, #sortable2",
       helper: "clone",
       revert: "invalid"
   });


   $( "ul, li" ).disableSelection();
    
});