<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/istavros/pen/XJXMRJ?limit=all&page=62&q=draggable" />
<link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">html {
box-sizing: border-box;
font-family: 'Segoe UI';
font-size: 13px;
}
*, *:before, *:after {
box-sizing: inherit;
}
.overlay {
position: fixed;
z-index: 99998;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
}
.em-edit-day {
position: fixed;
z-index: 99999;
width: 900px;
height: 300px;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
clear: both;
border-radius: 2px;
}
.em-day-header {
height: 30px;
background: #4285f4;
color: #fff;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
}
.emp-head,
.job-head,
.vhc-head {
display: inline-block;
float: left;
padding: 5px;
text-align: center;
font-weight: bold;
}
.emp-head,
.vhc-head {
width: 20%;
}
.emp-head:before {
font-family: FontAwesome;
content: '\f007';
padding: 0 5px;
}
.vhc-head:before {
font-family: FontAwesome;
content: '\f1b9';
padding: 0 5px;
}
.job-head {
width: 60%;
}
.job-head:after {
font-family: FontAwesome;
content: '\f073';
padding: 0 5px;
}
.em-day-body {
height: calc(100% - 30px);
}
.em-day-content {
height: 100%;
display: inline-block;
float: left;
padding: 5px;
}
.employees,
.vehicles {
width: 20%;
}
.jobs {
width: 60%;
}
.content {
width: 100%;
height: 100%;
background: #E0E0E0;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.12), inset 0 2px 4px rgba(0, 0, 0, 0.24);
padding: 10px;
border-radius: 2px;
}
.emp,
.vhc {
z-index: 10;
background: #fff;
padding: 5px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
border-radius: 2px;
transition: box-shadow .1s ease;
}
.emp + .emp, .emp + .vhc,
.vhc + .emp,
.vhc + .vhc {
margin-top: 10px;
}
.emp.dragged,
.vhc.dragged {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
z-index: 11;
}
.emp.dropped,
.vhc.dropped {
position: static !important;
padding: 0;
box-shadow: none;
margin: 0;
display: inline;
background: transparent;
color: #004D40;
}
.job {
display: inline-block;
float: left;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
width: 150px;
margin: 0 5px 10px;
display: inline-block;
border-radius: 2px;
}
.job .job-name {
padding: 5px;
height: 30px;
background: #009688;
color: #fff;
font-weight: bold;
text-align: center;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.job .job-emp,
.job .job-vhc {
position: relative;
padding: 5px;
padding-left: 35px;
height: 30px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
transition: all .2s ease;
}
.job .job-emp:before,
.job .job-vhc:before {
content: '';
position: absolute;
left: 0;
top: 8px;
font-family: FontAwesome;
text-align: center;
width: 30px;
color: #80CBC4;
border-right: 1px dotted #80CBC4;
}
.job .job-emp.active,
.job .job-vhc.active {
background: #B2DFDB;
}
.job .job-emp.active:before,
.job .job-vhc.active:before {
color: #009688;
border-color: #009688;
}
.job .job-emp:before {
content: '\f007';
}
.job .job-vhc:before {
content: '\f1b9';
}
</style></head><body>
<div class='overlay'></div>
<div class='em-edit-day'>
<div class='em-day-header'>
<div class='emp-head'>Employees</div>
<div class='job-head'>Jobs - Tuesday 09/12/2014</div>
<div class='vhc-head'>Vehicles</div>
</div>
<div class='em-day-body'>
<div class='em-day-content employees'>
<div class='content'>
<div class='emp'>Employee 1</div>
<div class='emp'>Employee 2</div>
<div class='emp'>Employee 3</div>
<div class='emp'>Employee 4</div>
<div class='emp'>Employee 5</div>
</div>
</div>
<div class='em-day-content jobs'>
<div class='content'>
<div class='job'>
<div class='job-name'>Job 1</div>
<div class='job-emp'></div>
<div class='job-vhc'></div>
</div>
<div class='job'>
<div class='job-name'>Job 2</div>
<div class='job-emp'></div>
<div class='job-vhc'></div>
</div>
<div class='job'>
<div class='job-name'>Job 3</div>
<div class='job-emp'></div>
<div class='job-vhc'></div>
</div>
<div class='job'>
<div class='job-name'>Job 4</div>
<div class='job-emp'></div>
<div class='job-vhc'></div>
</div>
<div class='job'>
<div class='job-name'>Job 5</div>
<div class='job-emp'></div>
<div class='job-vhc'></div>
</div>
</div>
</div>
<div class='em-day-content vehicles'>
<div class='content'>
<div class='vhc'>Vehicle 1</div>
<div class='vhc'>Vehicle 2</div>
<div class='vhc'>Vehicle 3</div>
<div class='vhc'>Vehicle 4</div>
<div class='vhc'>Vehicle 5</div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script >$('.emp').draggable({
revert: "invalid",
containment: "window",
cursor: "move",
start: function(event, ui){
$(this).addClass('dragged');
},
stop: function(event, ui){
$(this).removeClass('dragged');
}
});
$('.job-emp').droppable({
accept: '.emp',
activeClass: 'active',
drop: function(event, ui){
ui.draggable.addClass('dropped');
ui.draggable.detach().appendTo($(this));
}
});
$('.vhc').draggable({
revert: "invalid",
containment: "window",
cursor: "move",
start: function(event, ui){
$(this).addClass('dragged');
},
stop: function(event, ui){
$(this).removeClass('dragged');
}
});
$('.job-vhc').droppable({
accept: '.vhc',
activeClass: 'active',
drop: function(event, ui){
ui.draggable.addClass('dropped');
ui.draggable.detach().appendTo($(this));
}
});
//# sourceURL=pen.js
</script>
</body></html>
