JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.interactjs.io/interact-1.1.1.min.js"></script>
<script src="https://jqueryrotate.googlecode.com/files/jQueryRotateCompressed.js"></script>    	
<div id="container">
			<form method="post" action="/">
				<div id="dnd">
					<div id="star" class="draggable drag-drop">
						<img src="http://upload.wikimedia.org/wikipedia/commons/d/df/Star_icon_1.png" width='40' height='46' />
					</div>
					
					<div id="trees">
						<div class="tree">
							<img src="http://blog.christmastreemarket.com/wp-content/themes/ctm/icons/decorated-tree_icon.png" width='150' />
							Doel A
						</div>
						<div class="tree">
							<img src="http://blog.christmastreemarket.com/wp-content/themes/ctm/icons/decorated-tree_icon.png" width='150' />
							Doel B
						</div>
						<div class="tree">
							<img src="http://blog.christmastreemarket.com/wp-content/themes/ctm/icons/decorated-tree_icon.png" width='150' />
							Doel C
						</div>
					</div>
				</div>
			  
				<div class="field">
					<input type="submit" id="submit" name="submit" value="Volgende" />    
				</div>
			</form> 
    	</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Asap);

body{
	background: url('../img/achtergrond.jpg');
	width: 800px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	font-family: 'Asap', cursive;
}

label{
	display: block;
}

#container{
}

.drop-target {
}

#header{
	float: left;
	display: block;
	font-size: 30px;
	text-align: center;
	color: #860037;
}

#instruction{
	color: #428C00;
	text-align: center;
}

#content{
	display: block;
	height: auto;
	padding: 20px 10px;
    color: #FFFFFF;
}

.field{
	display: block;
	margin: 0 auto;
}

.field input{
	margin: 0 auto;
	text-align: center;
}

#star{
    display: inline-block;
	width: 50px;
	z-index: 1;
}

#trees{
	width: 100%;
	height: auto;
}

.tree{
	display: inline-block;
	margin: 0 6.5%;
	margin-top: 100px;
	height: 180px;
	color: #860037;
	font-weight: bold;
}

.tree img{
	display: block;
}

#submit {
	float: left;
	margin: 40px 44%;
    background-color: #860037;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    border:none;
}

JavaScript

interact('.draggable')
	    .draggable({
	        onmove: function (event) {
	            var target = event.target,
	                x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
	                y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
	
	            target.style.webkitTransform =
	            target.style.transform =
	                'translate(' + x + 'px, ' + y + 'px)';
	
	            target.setAttribute('data-x', x);
	            target.setAttribute('data-y', y);
	        },
	        onend: function (event) {
	            var textEl = event.target.querySelector('p');
	            
	            textEl && (textEl.textContent =
	                'moved a distance of '
	                + (Math.sqrt(event.dx * event.dx +
	                             event.dy * event.dy)|0) + 'px');
	        }
	    })
	    .inertia(true)
	    .restrict({
	        drag: "parent",
	        endOnly: true,
	        elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
	    });
	    
	interact('.draggable').snap({
	      mode: 'anchor',
	      anchors: [],
	      range: Infinity,
	      elementOrigin: { x: 0.5, y: 2 },
	      endOnly: true
	});
    
	// enable draggables to be dropped into this
	interact('.tree').dropzone({
	    // only accept elements matching this CSS selector
	    accept: '#star',
	    // Require a 75% element overlap for a drop to be possible
	    overlap: 0.75,
	
	    // listen for drop related events:
	
	    ondropactivate: function (event) {
	        // add active dropzone feedback
	        event.target.classList.add('drop-active');
	        
	    },
	    ondragenter: function (event) {
	        var draggableElement = event.relatedTarget,
	            dropzoneElement = event.target;
	
	        // feedback the possibility of a drop
			clearInterval(interval); // stop star rotation
	        dropzoneElement.classList.add('drop-target');
	        draggableElement.classList.add('can-drop');
	       ...