JSFiddle - React, Tailwind, and code Playground

by Slezi

HTML

<header>
Header
</header>

<div class="box">
    <div class="box-content">
		<div class="toPlan">
			<div class="productionLeader">
				<strong>Production Leader</strong>
				<div class="openSpots" id="openSpots">
					 
				</div>
				<strong>Free</strong>
				<div class="openSpots positionFree">
					
				</div>
				<strong>Ill</strong>
				<div class="openSpots positionIll">
					
				</div>
				<strong>Otherwise</strong>
				<div class="openSpots positionOtherwise">
					
				</div>
			</div>
		</div>
		<div class="overviewPlanning">
		Fabric map
		</div>
	</div>
	<div class="box-persons">
		Available collegues (to drag and drop into a spot)<br>
		<?php choosePerson(); ?>
	</div>
</div>

<footer>
Footer
</footer>

CSS

.box-content {
  display: flex;
  }
  .toPlan {
  width: 10%;
  }
  .overviewPlanning {
  flex: 1;
  }
  .box-persons {
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid #d8d8d8;
  }
  .boxPersons {
	width: 60px;
	height: 72px;
	padding: 5px;	
	margin: 10px;
	text-align: center;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	z-index: 99;
	}
	.posLeft {
		float: left;
	}
   .openSpots {
	width: 60px;
	height: 72px;
	padding: 5px;	
	margin: 10px;
	text-align: center;
	border: 0.5px dashed #000000;
	border-radius: 4px;
	z-index: 1;
   }

JavaScript

$( function() {
$( ".boxPersons" ).draggable({ 
	revert: 'invalid',
	containment: '.box',
	cursor: 'move',	
});

$( ".openSpots, .box-persons" ).droppable({
    accept: ".boxPersons",
    drop: function( event, ui ) {
       var droppable = $(this);
       var draggable = ui.draggable;
       // Move draggable into droppable
       draggable.appendTo(droppable);
        draggable.css({top: '0px', left: '0px'});
    }
});
});