Once the job box is dropped onto the timetable, I need it to cover specific timetable boxes based on the data-column value of the job box. For instance, if job-A has a data-column attribute set to 4, then it should cover 4 timetable boxes, indicating that this job requires 4 hours to complete. Appreciate your help with this. https://i.sstatic.net/pfS67.png
$(function() {
$('.job').draggable({
revert: true
});
$('.container').droppable({
hoverClass: 'active',
drop: function(e, ui) {
$(this).html(ui.draggable.remove().html());
$(this).droppable('destroy');
$(this).addClass("dropped");
},
over: function(e, ui) {
$(this).addClass("dropped");
},
out: function(e, ui) {
$(this).removeClass("dropped");
}
});
});.job {
width: 50px;
height: 15px;
padding: 2px;
margin: 0px 5px 10px 0;
border: 1px solid red;
background-color: #B9CD6D;
}
.dropJob {
display: grid;
grid-template-columns: 12vh repeat(9, 1fr);
}
.dropJob div {
border: 2px solid #1974a8;
border-right: none;
border-bottom: none;
padding: 3px 4px;
background: #a5d5ff;
line-height: 25px;
}
.dropJob div:nth-of-type(10n) {
border-right: 2px solid #1974a8;
}
.dropJob div:nth-last-child(-n + 10) {
border-bottom: 2px solid #1974a8;
}
.dropJob div:nth-child(10n + 1) {
background: #32a4e5;
font-size: 12px;
text-shadow: 1px 1px 2px #103143;
color: #e3f5ff;
}
.dropped {
background: green !important;
}
.timing {
display: grid;
grid-template-columns: 12vh repeat(9, 1fr);
}
.timing div {
text-align: center;
align-items: center;
text-shadow: 1px 1px 2px #103143;
color: #e3f5ff;
font-size: 15px;
background: #1974a8;
}
.scheduleContain {
width: 100%;
margin: 0 auto;
}<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="job" data-column="4">Job-A</div>
<div class="job" data-column="1">Job-B</div>
<div class="job" data-column="2">Job-C</div>
<div class="job" data-column="7">Job-D</div>
<div class="scheduleContain">
<div class="timing">
<div>Name</div>
<div>9am</div>
<div>10am</div>
<div>11am</div>
<div>12am</div>
<div>1pm</div>
<div>2pm</div>
<div>3pm</div>
<div>4pm</div>
<div>5pm</div>
</div>
<div class="dropJob">
<div>John Smith</div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</div>