JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<ul id="list-two" class="linked">
    <li>1. input</li>
    <li>2. input</li>
    <li>3. input</li>
    <li>5. input</li>
    <li>6. input</li>
    <li>8. input</li>
    <li>9. input</li>
    <li>11. input</li>
    <li>12. input</li>
</ul>

<ul id="list-one" class="linked">
    <li>4. input</li>
    <li>7. input</li>
    <li>10. input</li>
    <li>13. input</li>
</ul>

CSS

h1 {
    font-size:1.4em;
}
h2 {
    font-size:1.2em;
}
p {
    margin: 10px;
}
ul {
    width: 400px;
    float:left;
    -moz-transition: background-color ease .5s;
    -webkit-transition: background-color ease .5s;
}

ul li {
    float: left;
    width: 80px;
    padding: 10px;
}

li {
    text-decoration: none;
    list-style: none;
}

.ui-state-highlight {
    background-color: #227945 !important;
}

#list-one {
    background-color: #998800;
}

#list-two {
    background-color: #eee;
}
#list-two li img {
    opacity: 0.7;
}

JavaScript

$(function() {
    var listOne = $('#list-one'),
        listTwo = $('#list-two');
    listOne.sortable({
        revert: true,
        beforeStop: function(event, ui) {
            $(this).data("lastItem", ui.item);
        },
        receive: function(event, ui) {
            $(this).data("lastItem" ).find('img').css('opacity','1');
            ui.item.draggable('destroy').css('opacity', '0.2');
        }
    });
    listTwo.find('li').draggable({
        connectToSortable: "#list-one",
        helper: "clone",
        revert: "invalid"
    });
    $("ul, li, img").disableSelection();
});