JSFiddle - React, Tailwind, and code Playground

by tunafish

HTML

<div class="demo">
    
    <h2>Album</h2>
    <ul id="album">
        <li class="fav">01.jpg</li>
        <li class="fav">02.jpg</li>
        <li>03.jpg</li>
        <li>04.jpg</li>
        <li>05.jpg</li>
    </ul>
    
    <h2>Favorites</h2>
    <ul id="favorites">
        <li class="fav">01.jpg</li>
        <li class="fav">02.jpg</li>
        <li class="fav">10.jpg</li>
    </ul>
    
</div><!-- End demo -->

CSS

.demo { background: darkgray; padding: 10px; }
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
.demo li { margin: 5px; padding: 5px; width: 150px; height: 20px; background: white; }

#favorites { background: silver; padding: 10px; }
#album { background: gray; padding: 10px; }

li.placeholder { background: lightgray; }
li.fav { 
    background-image: url('http://www.betterlifecycle.com/Images/IconFavorite.png');
    background-repeat: no-repeat;
    background-position: 138px center;
}
.dragOver { background: lightblue; }

JavaScript

$("ul, li").disableSelection();

$("#album, #favorites").sortable({
    containment: '.demo',
    cursor: "move", 
    revert: 200,
    connectWith: "#album, #favorites", 
    placeholder: 'placeholder', 
    forcePlaceholderSize: true, 
    start: startDrag, 
    over: overConnectList, 
    out: outConnectList, 
    receive: doClone /* same as remove() */
    /* activate, deactivate */
});

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

function doClone(event, ui) {
    if (ui.sender.is('#album')) {
     
        // clone and insert where we got it
        if (itemOriIndex == 0) {
            ui.item.clone().prependTo('#album');
        } else {
            itemOriIndex -= 1;
            ui.item.clone().insertAfter('#album li:eq(' + itemOriIndex + ')');
        }
        
        // is this allready a favorite?
        var itemContent = ui.item.text();
        alert(itemContent)
        isDouble(itemContent);
        /*
        if (isDouble(itemContent) == false) { 
            alert('add'); 
        } else {
            alert('don\'t add'); 
        }
        */
    // sender favorites    
    } else {
        
        // clone and insert where we got it
        if (itemOriIndex == 0) {
            ui.item.clone().prependTo('#favorites');
        } else {
            itemOriIndex -= 1;
            ui.item.clone().insertAfter('#favorites li:eq(' + itemOriIndex + ')');
        }
    }
}

function isDouble(content) {
    alert( ($("#favorites li:contains(" + content + ")").length > 0) );
}


function overConnectList(event, ui) {
    // This event is triggered when a sortable item is moved into a connected list.
    if (ui.sender.is('#album')) {
        if (ui.item.hasClass('fav')) {
            // $("#favorites").sortable("disable");
            // $(ui.sender).sortable('cancel');
        }
    } else {
    
    }
}
function outConnectList(event, ui) {
    // This event is triggered when a sortable item is moved away from...