JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<div class="demo">
    
    
    <ul id="album">
        <li class="ui-state-default">photo 1</li>
        <li class="ui-state-default">photo 2</li>
        <li class="ui-state-default">photo 3</li>
        <li class="ui-state-default">photo 4</li>
        <li class="ui-state-default">photo 5</li>
    </ul>
    
    <h2>Favorites</h2>
    <ul id="favorites">
        <li class="ui-state-highlight">fav 1</li>
        <li class="ui-state-highlight">fav 2</li>
        <li class="ui-state-highlight">fav 3</li>
    </ul>
    
</div><!-- End demo -->

CSS

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

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

JavaScript

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

$("#album").sortable({
    revert: true
});


$("#favorites").sortable({
    revert: true
});
$("#favorites li").draggable({
    connectToSortable: "#album",
    helper: "clone",
    revert: "invalid"
});
$("#album li").draggable({
    connectToSortable: "#favorites",
    helper: "clone",
    revert: "invalid"
});

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