JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<div class="sortable">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

<div class="draggable">Draggable</div>

CSS

body { margin: 0 auto; padding: 50px 0; width: 80px }

.sortable div { margin-bottom: 10px; width: 80px; height: 30px; background: lightblue }

.draggable { width: 80px; height: 30px; cursor: move; background: lightgreen }

.sortable .draggable { background: lightgreen }

JavaScript

$(document).ready(function() {

    $('.sortable').sortable({
		revert: true
	});

    $('.draggable').draggable({
		connectToSortable : '.sortable',
		revert            : 'invalid'
	});

    $('.draggable').disableSelection();

});