JSFiddle - React, Tailwind, and code Playground

by tunafish

HTML

<div class="demo">
    
<div id="album">
    <p>Photo Album</p>
    <ul 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="album-placeholder">Drag your favorites here</li>
    </ul>
</div>
    
<div id="favorites">
    <p>Favorites <small>- drag them to the Photo Album</small></p>    
    <ul class="gallery">
        <li class="fav-placeholder">Drag album items here</li>
        <li>
            <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><!-- End demo -->

CSS

#album, #favorites { float:left; width: 465px; padding: 10px; background: silver; }    
    #favorites { margin-top: 10px; }

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

JavaScript

$(function() {
        $(".album-placeholder").hide();
        
        $("#favorites li").draggable({
            revert: "invalid",
            helper: "clone",
            cursor: "move",
            start: function(event, ui) { $(".album-placeholder").show(); },
            stop: function(event, ui) { $(".album-placeholder").hide(); }
        });
        $("#album li.album-placeholder").droppable({
            activeClass: "album-placeholder-active",
            hoverClass: "album-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 ul");
                $(this).appendTo($(this).parent());
            }
        });
        $("#album ul").sortable({
            placeholder: 'album-placeholder-sort',
            forcePlaceholderSize: true,
            items: "li:not(.album-placeholder)"
        });
    });