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) {
              if (!ui.draggable.find('.delete').length) addControls(ui.draggable);
          }
      });

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

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