JSFiddle - React, Tailwind, and code Playground

by tunafish

HTML

<div class="page">

<div class="container">
    <p>Album</p>
    <ul class="listing album">
        <li id="li-1"><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2008/04/ireland-flag.gif" /></li>
        <li id="li-2"><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2007/06/austria-flag.gif" /></li>
        <li id="li-3"><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2007/06/puerto-rico-falg.gif" /></li>
        <li id="li-4"><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2007/06/japan-flag.gif" /></li>
        <li id="li-5"><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="favorites album">
        <li id="fli-1"><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2008/04/ireland-flag.gif" /></li>
        <li id="fli-2"><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2007/06/austria-flag.gif" /></li>
        <li id="fli-3"><img src="http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2007/06/kazakhstan-flag.gif" /></li>
    </ul>
</div>

</div>

CSS

.page { width: 410px; padding: 20px; margin: 0 auto; background: darkgray; }   
    .album { list-style: none; overflow: hidden; 
        width: 410px; margin: 0; padding: 0; padding-top: 5px;
        background: gray; 
    } 
    .listing { margin-bottom: 10px; }
    .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();

$(".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("Ireland is in favorites? " + isInFavorites("http://www.hamovhotov.com/ratemycountry/wp-content/uploads/2008/04/ireland-flag.gif"));
// alert("Japan is in favorites? " + isInFavorites("hhttp://www.hamovhotov.com/ratemycountry/wp-content/uploads/2007/06/japan-flag.gif"));

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