JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="well">
	<ul class="inline options">
		<li class="draggable ui-state-highlight textDrag">Text</li>
		<li class="draggable ui-state-highlight imgDrag">Image</li>
	</ul>
	<ul id="sortable" class="unstyled">
		<li class="mysortable">
			item 1
		</li>
		<li class="mysortable">
			item 2
		</li>
		<li class="mysortable">
			item 3
		</li>
	</ul>
	
</div>

CSS

.options {
	padding: 8px;
}
.options li {
	margin: 4px;
}
.mysortable {
	border: dotted black 1px;
}

JavaScript

$(document).ready(function(){
	$('#sortable').sortable({
		revert: true,
		update: function(event, ui){
			if(!$(ui.item).hasClass('mysortable')){	
        $(ui.item).removeClass('ui-state-highlight');
				$(ui.item).addClass('mysortable');
			}
		}
	});
	$('.draggable').draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
	});
	
});