Explore Templates


Drag between these two containers. Note how the stuff gets inserted near the mouse pointer? Great stuff.

Basic example
Item 1
Item 2
Item 3
Item 7
Item 8
Item 9
<div class="row dragula-demo">
	<div class="col-4">
		<div id="left" class="dragula-block">
			<div>Item 1</div>
			<div>Item 2</div>
			<div>Item 3</div>
	<div class="col-4">
		<div id="right" class="dragula-block">
			<div>Item 4</div>
			<div>Item 5</div>
			<div>Item 6</div>
	<div class="col-4">
		<div id="center" class="dragula-block">
			<div>Item 7</div>
			<div>Item 8</div>
			<div>Item 9</div>
<!-- Dragula JS -->
<script src="vendors/dragula/dist/dragula.min.js"></script>

dragula([document.getElementById('left'), document.getElementById('right'), document.getElementById('center')]);