JSFiddle - React, Tailwind, and code Playground

by tunafish

HTML

<div class="container">
    <p>Album</p>
    <ul class="gallery album">
        <li><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2008/04/ireland-flag.gif" /></li>
        <li><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2007/06/austria-flag.gif" /></li>
        <li><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2007/06/puerto-rico-falg.gif" /></li>
        <li><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2007/06/japan-flag.gif" /></li>
        <li><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2007/06/bolivia-flag.gif" /></li>
    </ul>
</div>
    
<div style="clear:both;"></div>
    
<div class="container">
    <p>Favorites</p>    
    <ul class="gallery favorites">
        <li><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2008/04/ireland-flag.gif" /></li>
        <li><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2007/06/austria-flag.gif" /></li>
        <li><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2007/06/kazakhstan-flag.gif" /></li>
    </ul>
</div>

CSS

.gallery { list-style: none; overflow: hidden; 
        width: 410px; margin: 0; padding: 0; padding-top: 5px;
        background: gray; 
    }    
    .gallery 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();

$(".album, .favorites").sortable({
    connectWith: ".album, .favorites",
    placeholder: 'placeholder', 
    forcePlaceholderSize: true,
    start: startDrag, 
    receive: doClone
});

function doClone(event, ui) {
    // from .album -> .favorites
    if (ui.sender.is('.album')) {
        // is this allready a favorite?
        var itemSrc = ui.item.find("img").attr("src");
        if (isInFavorites(itemSrc)) { 
            alert('this item is allready in favorites list, do not accept');
            // do not accept item in favorites list
        } else {
            alert('OK, now clone back to album');
            /* item is moved to favorites, clone and insert into .album where it came from to mimic copying
            if (itemOriIndex == 0) { ui.item.clone().prependTo('.album'); } 
            else { itemOriIndex -= 1; ui.item.clone().insertAfter('.album li:eq(' + itemOriIndex + ')'); }
            */
        }
    // from .favorites -> .album
    } else {}
}
    
function isInFavorites(url) {
    return $(".favorites li img[src*='" + url + "']").length > 0;
}
// test
// alert("001.jpg is in favorites? " + isInFavorites("http://immoshots.com/albums/002171/tn/002.jpg"));
// alert("005.jpg is in favorites? " + isInFavorites("http://immoshots.com/albums/002171/tn/005.jpg"));

var itemOriIndex; // outside scope
function startDrag(event, ui) { itemOriIndex = ui.item.index(); }