JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">
    
<div id="favorites">
    <p>Favorites <small>- drag them to the Photo Album</small></p>    
    <ul class="gallery">
        <li id="foo">
            <img id="bar" src="http://jqueryui.com/demos/droppable/images/high_tatras_min.jpg" />
        </li>
        <li>
            <img id="bar" src="http://jqueryui.com/demos/droppable/images/high_tatras4_min.jpg" />
        </li>
    </ul>
</div>

<div id="album">
    <p>Photo Album</p>
    <ol class="gallery">
        <li>
            <img src="http://jqueryui.com/demos/droppable/images/high_tatras_min.jpg" />
        </li>
        <li>
            <img src="http://jqueryui.com/demos/droppable/images/high_tatras2_min.jpg" />
        </li>
        <li>
            <img src="http://jqueryui.com/demos/droppable/images/high_tatras3_min.jpg" />
        </li>
        <li>
            <img src="http://jqueryui.com/demos/droppable/images/high_tatras4_min.jpg" />
        </li>
        <li>
            <img src="http://jqueryui.com/demos/droppable/images/high_tatras_min.jpg" />
        </li>
        <li>
            <img src="http://jqueryui.com/demos/droppable/images/high_tatras2_min.jpg" />
        </li>
        <li>
            <img src="http://jqueryui.com/demos/droppable/images/high_tatras3_min.jpg" />
        </li>
        <li>
            <img src="http://jqueryui.com/demos/droppable/images/high_tatras4_min.jpg" />
        </li>
        <li class="placeholder">Drag your favorites here</li>
    </ol>
</div>

</div><!-- End demo -->

CSS

#favorites, #album { float:left; padding: 10px; background: silver; }    
    #favorites { width: 235px; margin: 0 20px 10px 0; }
    #album { width: 465px; }

    .gallery li { float: left; width: 96px; height: 72px; margin: 5px; padding: 5px; 
        text-align: center; cursor: move;
        background: #404040;  color: white; 
    }
    .gallery li.placeholder-active { background: orange; color: black; }
    .gallery li.placeholder-hover { background: green; color: black; }

    .placeholder-sort {
        border: 2px dashed white;
     }

JavaScript

$(function() {
        $(".placeholder").hide();
        $("#favorites li").draggable({
            revert: "invalid",
            helper: "clone",
            cursor: "move",
            start: function(event, ui) { $(".placeholder").show(); },
            stop: function(event, ui) { $(".placeholder").hide(); }
        });
        $("#album li.placeholder").droppable({
            activeClass: "placeholder-active",
            hoverClass: "placeholder-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function(event, ui) {
                var tn_src = ui.draggable.find("img").attr("src");
                $("<img />").attr("src", tn_src).wrap("<li />").parent().appendTo("#album ol");
                $(this).appendTo($(this).parent());
            }
        });
        $("#album ol").sortable({
            placeholder: 'placeholder-sort',
            forcePlaceholderSize: true, 
            items: "li:not(.placeholder)"
        });
    });