JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<ul class='sortable'>
  <li>sortable 1</li>
  <li>sortable 2</li>
  <li>sortable 3</li>
  <li>sortable 4</li>
</ul>
<ul class='sortable'>
  <li>sortable 1</li>
  <li>sortable 2</li>
  <li>sortable 3</li>
  <li>sortable 4</li>
</ul>

<ul id='draggables'>
  <li class='draggable'>draggable 1</li>
  <li class='draggable'>draggable 2</li>
  <li class='draggable'>draggable 3</li>
</ul>

CSS

.ui-sortable-placeholder {
  background: #ff0000;
}
.draggable {
  margin: 4px;
  cursor: move;
}

JavaScript

$('.sortable').sortable({
  connectWith: '.sortable',
  revert: 600,
  forcePlaceholderSize: true,
  placeholder: 'ui-sortable-placeholder',
  tolerance: 'pointer'
}).disableSelection();

$('.draggable').draggable({
  connectToSortable: '.sortable',
  helper: 'clone',
  revert: true
}).disableSelection();