JSFiddle - React, Tailwind, and code Playground

by tunafish

HTML

<div class="container">
    <p>Photo Album</p>
    <ul class="album listing">
        <li><img src="http://immoshots.com/albums/002171/tn/001.jpg" /></li>
        <li><img src="http://immoshots.com/albums/002171/tn/002.jpg" /></li>
        <li><img src="http://immoshots.com/albums/002171/tn/003.jpg" /></li>
        <li><img src="http://immoshots.com/albums/002171/tn/004.jpg" /></li>
        <li><img src="http://immoshots.com/albums/002171/tn/005.jpg" /></li>
    </ul>
</div>
    
<div style="clear:both;"></div>
    
<div class="container">
    <p>Favorites</p>    
    <ul class="album favorites">
        <li><img src="http://immoshots.com/albums/002171/tn/001.jpg" /></li>
        <li><img src="http://immoshots.com/albums/002171/tn/002.jpg" /></li>
        <li><img src="http://immoshots.com/albums/002171/tn/010.jpg" /></li>
    </ul>
</div>

CSS

.album { list-style: none; overflow: hidden; 
        width: 410px; margin: 0; padding: 0; padding-top: 5px;
        background: gray; 
    }    
    .album li { float: left; outline: none;
        width: 120px; height: 80px; margin: 0 0 5px 5px; padding: 5px;
        background: #222222;
     }
    
    li.placeholder { background: lightgray; }

JavaScript

$("ul, li").disableSelection();
$(".listing, .favorites").sortable({
    connectWith: ".listing, .favorites",
    placeholder: 'placeholder', 
    forcePlaceholderSize: true,
    receive: doReceive
});

function doReceive(event, ui) {
    if (ui.sender.is('.listing')) { // dragged from .listing to .favorites
        // is this allready a favorite?
        var itemSrc = ui.item.find("img").attr("src");
        if (!isFavorite(itemSrc)) { 
            alert('this is allready a favorite');
        } else {
            alert('ok, move');
        }
    } else {} // dragged from .favorites to .listing

}

    
function isFavorite(url) {
    return $(".favorites li img[src*='" + url + "']").length > 0;
}
// test
// alert(isFavorite("../../albums/002171/tn/003.jpg"));