JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div class="content">
	<div class="column1">

		<div class="daycontainer">
			<div class="title">Monday</div>
			
			<div class="timecontainer">
				<div class="hour">8:</div>
				<div class="mincontainer">
					<div class="minute">00</div><div class="snap" data-timeslot="8:00">8a</div>
					<div class="minute">15</div><div class="snap" data-timeslot="8:15">8b</div>
					<div class="minute">30</div><div class="snap" data-timeslot="8:30">8c</div>
					<div class="minute">45</div><div class="snap" data-timeslot="8:45">8d</div>
				</div>
			</div>		
			
			<div class="timecontainer">
				<div class="hour">9:</div>
				<div class="mincontainer">
					<div class="minute">00</div><div class="snap" data-timeslot="9:00">9a</div>
					<div class="minute">15</div><div class="snap" data-timeslot="9:15">9b</div>
					<div class="minute">30</div><div class="snap" data-timeslot="9:30">9c</div>
					<div class="minute">45</div><div class="snap" data-timeslot="9:45">9d</div>
				</div>
			</div>		
			
			<div class="timecontainer">
				<div class="hour">10:</div>
				<div class="mincontainer">
					<div class="minute">00</div><div class="snap" data-timeslot="10:00">10a</div>
					<div class="minute">15</div><div class="snap" data-timeslot="10:15">10b</div>
					<div class="minute">30</div><div class="snap" data-timeslot="10:30">10c</div>
					<div class="minute">45</div><div class="snap" data-timeslot="10:45">10d</div>
				</div>
			</div>		
			
			<div class="timecontainer">
				<div class="hour">11:</div>
				<div class="mincontainer">
					<div class="minute">00</div><div class="snap" data-timeslot="11:00">11a</div>
					<div class="minute">15</div><div class="snap" data-timeslot="11:15">11b</div>
					<div class="minute">30</div><div class="snap" data-timeslot="11:30">11c</div>
					<div class="minute">45</div><div class="snap"...

CSS

.content{
		width:600px;
	}
	
	.content .column1{
		width:60%;
		float: left;
	}
	.content .column2{
		width:40%;
		float: right;
	}
	
	.daycontainer{
		width:150px;
		height:600px;
		border:1px solid #003366;
		
	}
	
	.daycontainer .title{
		width:100%;
		background:silver;
		text-align: center; 
		
	}
	
	.daycontainer .timecontainer{
		width:100%;
		line-height: 15px;
		height: 64px;
	}
	
	.daycontainer .timecontainer .hour{
		width:15%;
		float: left;
		text-align: right;
		font-size:14px; 
	}
	
	.daycontainer .timecontainer .mincontainer{
		width:85%;
		float: right;
		font-size:12px;
	}
	
	.daycontainer .timecontainer .mincontainer .minute{
		width:15%;
		float: left;
		vertical-align:top;
		background:#cdcdcd;
		height: 15px;
	}
	
	.daycontainer .timecontainer .mincontainer .snap{
		width:85%;
		float: right;
		border-bottom:1px solid #003366;
		height: 15px;
	}
	
	.eventcontainer{
		border:1px solid #003366;
		width: 150px;
		
	}
	
	.eventcontainer .title{
		width:100%;
		background:#8fbc8f;
		text-align: center; 
		
	}
	
	.event{
		width: 106px;
		height: 60px;
		background:#afeeee;
		margin: 2px;
	
	}
	
	.event2{
		width: 106px;
		height: 120px;
		background:#afeeee;
		margin: 2px;
	
	}
	
	.eventtitle{
		width: 100px;
		line-height: 15px;
		height: 15px;
		font-size:12px;
		background:#b8860b;
		padding: 3px;
		vertical-align:top;
		
	}
    .eventdetail {
        border: 1px solid red;
    }

JavaScript

$(function() {
        $(".draggable" ).draggable({ 
            snap: ".snap", 
            snapMode: "inner",
			revert: "invalid",
			cursor: "move",
			handle: ".eventtitle"
			
        });
		$( ".snap" ).droppable({
			drop: function( event, ui ) {
				var $drag = $(ui.draggable)
				var $drop = $(this);
				console.log( $drag.data( "eventid" ) );
				console.log( $drop.data( "timeslot" ) );
			}
		});

        
	});