JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div class="list_container">
    <ul class="connectedSortable">
        <li class="draggable" id="item1">
            <h2>Item 1</h2>
            <img src="/img/item1.jpg"/>            
        </li>
        <li class="draggable" id="item2">
            <h2>Item 2</h2>
            <img src="/img/item2.jpg"/>            
        </li>
        <li class="draggable" id="item3">
            <h2>Item 3</h2>
            <img src="/img/item3.jpg"/>            
        </li>
    </ul>
</div>

<div class="list_container">
    <ul id="sortable"></ul>
</div>

CSS

.list_container { float: left; width: 45%; clear: none;min-height: 400px; margin:0 2%;  }
.list_container ul { list-style-type: none; margin: 0; min-height: 600px; background-color: #eee; }
.list_container img {width:100px; height:100px;}
.ui-state-highlight { height: 130px; background-color: #ddd; }

JavaScript

$(function () {
        var order = null;

        $("#sortable")
            .sortable({
                revert: true,
                placeholder: "ui-state-highlight"
            })
            .droppable({
                drop: function (event, ui) {
                    addControls(ui.draggable);
                }
            });

        $(".draggable").draggable({
            connectToSortable: "#sortable",
            helper: "clone",
            revert: "invalid"
        });
        $("ul, li").disableSelection();
    });

    function addControls($item) {
        $item.append('<a href="#">delete</a>');
    }