JSFiddle - React, Tailwind, and code Playground

by Jake Barrow

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<form method="post" action="">

	<span>Drop:</span>
	<div id="qselected">

	</div>

	<input type="submit" name="add" value="Opslaan" />
</form>

<span>Drag:</span>
<div id="qlist">
	<div class="qitem">
		<span data-item="1" class="question">vraag1....</span>
		<input type="hidden" value="1" name="question[]" />
	</div>

	<div class="qitem">
		<span data-item="2" class="question">vraag 2...</span>
		<input type="hidden" value="2" name="question[]" />
	</div>
	<div class="qitem">
		<span data-item="3" class="question">vraag 3...</span>
		<input type="hidden" value="3" name="question[]" />
	</div>
	<div class="qitem">
		<span data-item="4" class="question">vraag 4...</span>
		<input type="hidden" value="4" name="question[]" />
	</div>
</div>

CSS

.qitem {
	border: 1px black solid;
}


#qselected, #qlist {
	width: 300px;
	height:200px;
	border: 1px black solid;
}

JavaScript

$(document).ready(function() {

	$("#qselected").sortable();
	$("#qselected").disableSelection();

	$(".qitem").draggable({
		containment : "#container",
		helper : 'clone',
		revert : 'invalid'
	});

	$("#qselected, #qlist").droppable({
		hoverClass : 'ui-state-highlight',
        accept: ":not(.ui-sortable-helper)",
		drop : function(ev, ui) {
			$(ui.draggable).clone().appendTo(this);
			$(ui.draggable).remove();
		}
	});
});