What i have
I have a calendar where users are being dynamically loaded into using PHP, Ajax and Jquery. The users and headers are predefined by a grid layout.
for example:
<tr>Team 1</tr>
<tr>User A</tr>
<tr>User B</tr>
<tr>Team 2</tr>
<tr>User A</tr>
<tr>User B</tr>
This list is loaded automatically based on the users in our database.
What i need:
I want to be able to sort each team in the way i want. But its not allowed to mix the teams up.
Therefor users have to be disallowed to drop a users from Team 1 to Team 2 and vice versa.
Users rows can be moved by dragging the up/down arrows
The issue:
I am adding data-group attribute to each user where the number declares to which group the user belongs. This works fine when i use items: "tr[data-group='1']", But when i try to make the data-group id found dynamically the function stops to work.
So i am looking for a way to use $(ui.item).attr('data-group') to dynamicly find the dragged data-group id, and change the items: function so it accept sorting where users have the same data-group id.
I have tried to make the selector dynamically using a function:
items: function(e, ui) {
var d = 'tr[data-group="'+ $(ui.item).attr('data-group') +' "] ';
return d;
},
Working snippet for 1 user group:
$('.cal-tbody').sortable({
handle: '.cal-user-move',
start: function(e, ui) {
$(ui.item).css('background-color', '#eaecee');
$(ui.item).css('z-index', '10040');
},
helper: function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
},
placeholder: 'cal-sort-user',
items: "tr[data-group='1']",
stop: function(e, ui) {
$(ui.item).css('background-color', '');
$(ui.item).css('z-index', '');
}
}).disableSelection();/* minified because it's not relevant for the question */
.test{height:25px;width:25px;line-height:25px;top:0;right:-24px;position:absolute;background-color:#fff;color:#ff8e00;text-align:center;font-size:13px;box-shadow:1px 1px 3px #b5b5b5;cursor:pointer}.test:hover{color:#fff;background-color:#ff8e00}.table td,.table th{padding:5px!important}th:first-child{position:sticky;left:0;z-index:10030}td:first-child{position:sticky;left:0;z-index:10010}thead th{position:sticky;top:0;z-index:10020}.cal-container{max-width:900px;max-height:500px;overflow:auto;margin:auto}.cal-table{position:relative;border:solid #ebebeb;border-width:0 1px 0 0;overscroll-behavior:contain}.cal-thead{top:0;box-shadow:0 10px 50px rgba(0,0,0,.04)}.cal-viewmonth{font-size:16px;background:#fdfdfd;width:150px;height:50px}.cal-toprow{width:182px;min-width:182px;color:#3e5569;background-color:#f7f9fb!important;border:1px solid #ebebeb!important}.cal-toprow,.cal-viewmonth{font-weight:700!important;text-align:center;vertical-align:middle!important}.cal-userinfo{height:70px;box-shadow:20px 0 50px rgba(0,0,0,.05)}.cal-tbody .cal-userinfo{min-width:150px!important;text-align:right;color:#60666b;font-weight:600;font-size:12px;letter-spacing:.03em;background:#fdfdfd;padding:.3em;border:1px solid #ebebeb}.cal-usersheader{height:20px;box-shadow:20px 0 50px rgba(0,0,0,.05);min-width:150px!important;text-align:center;font-weight:700;font-size:15px;letter-spacing:.03em;padding:.3em}.details{border-radius:4px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.08);border:1px solid #ebecee;padding:0 0 5px 10px;margin:2px;z-index:1}.details-uren{font-size:12px;color:#333;font-weight:500;margin:0;right:0;text-align:right;padding-right:10px}.details-task{margin-top:5px;margin-bottom:2px;font-size:12px;padding:2px 5px;font-weight:600;line-height:1.4;border-radius:2px;width:94%}.cal-user-move{bottom:0;margin-left:5px;position:absolute;color:#3e5569;font-size:18px;cursor:pointer}.cal-user-move:hover{color:#1e895a}.cal-sort-user{border:2px dashed #999;background:#ede8e8;height:85px}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
<div style="margin-bottom: 0;">
<div class="cal-sectionDiv">
<table class="table table-striped table-bordered">
<thead class="cal-thead">
<tr>
<th class="cal-viewmonth" id="changemonth">juli 2020</th>
<th class="cal-toprow">Wednesday 1</th>
<th class="cal-toprow">Thursday 2</th>
<th class="cal-toprow">Friday 3</th>
<th class="cal-toprow weekend">Saturday 4</th>
<th class="cal-toprow weekend">Sunday 5</th>
</tr>
</thead>
<tbody class="cal-tbody">
<tr id="header1">
<td class="cal-usersheader" style="color:#000000; background-color:#B67AEB;">Team 1</td>
<td colspan="5" style="color:#000000; background-color:#B67AEB;"></td>
</tr>
<tr id="u1" data-group="1">
<td class="cal-userinfo">
<span><b style="text-decoration: underline">Van Els</b> Numan</span>
<div class="cal-user-move"><i class="fas fa-arrows-alt-v"></i></div>
</td>
<td class="ui-droppable" data-date1="1/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13956" data-userid="1" style="border-left: 5px solid rgb(81, 255, 0); position: relative;">
<h3 class="details-task" style=" background: #51FF00; color: #000000">Training</h3>
<div class="details-uren">
15:00 - 16:30
</div>
</div>
</td>
<td class="ui-droppable" data-date1="2/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13957" data-userid="1" style="border-left: 5px solid rgb(121, 32, 32); position: relative;">
<h3 class="details-task" style=" background: #792020; color: #FFFFFF">Day Shift</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date1="3/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13959" data-userid="1" style="border-left: 5px solid rgb(175, 0, 0); position: relative;">
<h3 class="details-task" style=" background: #AF0000; color: #FFFFFF">Sick</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="4/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13958" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
07:30 - 16:30
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="5/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12179" data-userid="1" style="border-left: 5px solid rgb(30, 137, 90); position: relative;">
<h3 class="details-task" style=" background: #1E895A; color: #FFFFFF">Vacation</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
</tr>
<tr id="u2" data-group="1">
<td class="cal-userinfo">
<span><b style="text-decoration: underline">Henzen</b> Susanna</span>
<div class="cal-user-move"><i class="fas fa-arrows-alt-v"></i></div>
</td>
<td class="ui-droppable" data-date1="1/7/2020" data-userid="2"></td>
<td class="ui-droppable" data-date1="2/7/2020" data-userid="2">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12326" data-userid="2" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
11:00 - 18:00
</div>
</div>
</td>
<td class="ui-droppable" data-date1="3/7/2020" data-userid="2">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="11978" data-userid="2" style="border-left: 5px solid rgb(255, 184, 72); position: relative;">
<h3 class="details-task" style=" background: #FFB848; color: #000000">Late shift</h3>
<div class="details-uren">
17:00 - 00:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="4/7/2020" data-userid="2">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12189" data-userid="2" style="border-left: 5px solid rgb(189, 0, 0); position: relative;">
<h3 class="details-task" style=" background: #BD0000; color: #FFFFFF">Extra shift</h3>
<div class="details-uren">
21:00 - 04:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="5/7/2020" data-userid="2">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12169" data-userid="2" style="border-left: 5px solid rgb(30, 137, 90); position: relative;">
<h3 class="details-task" style=" background: #1E895A; color: #FFFFFF">Vacation</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
</tr>
<tr id="header2">
<td class="cal-usersheader" style="color:#FFF; background-color:#7a0800;">Team 2</td>
<td colspan="5" style="color:#FFF; background-color:#7a0800;"></td>
</tr>
<tr id="u3" data-group="2">
<td class="cal-userinfo">
<span><b style="text-decoration: underline">Mak</b> Lokman</span>
<div class="cal-user-move"><i class="fas fa-arrows-alt-v"></i></div>
</td>
<td class="ui-droppable" data-date1="1/7/2020" data-userid="3">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12938" data-userid="3" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
12:00 - 19:00
</div>
</div>
</td>
<td class="ui-droppable" data-date1="2/7/2020" data-userid="3">
</td>
<td class="ui-droppable" data-date1="3/7/2020" data-userid="3">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12266" data-userid="3" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
05:00 - 12:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="4/7/2020" data-userid="3">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12286" data-userid="3" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
07:00 - 14:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="5/7/2020" data-userid="3">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12107" data-userid="3" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
</tr>
<tr id="u4" data-group="2">
<td class="cal-userinfo">
<span><b style="text-decoration: underline">Van Els</b> Numan</span>
<div class="cal-user-move"><i class="fas fa-arrows-alt-v"></i></div>
</td>
<td class="ui-droppable" data-date1="1/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13956" data-userid="1" style="border-left: 5px solid rgb(81, 255, 0); position: relative;">
<h3 class="details-task" style=" background: #51FF00; color: #000000">Training</h3>
<div class="details-uren">
15:00 - 16:30
</div>
</div>
</td>
<td class="ui-droppable" data-date1="2/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13957" data-userid="1" style="border-left: 5px solid rgb(121, 32, 32); position: relative;">
<h3 class="details-task" style=" background: #792020; color: #FFFFFF">Day Shift</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date1="3/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13959" data-userid="1" style="border-left: 5px solid rgb(175, 0, 0); position: relative;">
<h3 class="details-task" style=" background: #AF0000; color: #FFFFFF">Sick</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="4/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13958" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
07:30 - 16:30
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="5/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12179" data-userid="1" style="border-left: 5px solid rgb(30, 137, 90); position: relative;">
<h3 class="details-task" style=" background: #1E895A; color: #FFFFFF">Vacation</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>I have made a workaround using the stop: function that comes withsortable().
Using the stop: function we can check if the Dropped element and the Replaced element have the same data-group id.
if (ui.item.attr('data-group') != ui.item.prev().attr('data-group')) {
If the data-group is not the same for the Dropped and Replaced element
we revert the sort using the cancel option.
$(this).sortable('cancel');
Snippet:
$('.cal-tbody').sortable({
handle: '.cal-user-move',
start: function(e, ui) {
$(ui.item).css('background-color', '#eaecee');
$(ui.item).css('z-index', '10040');
},
helper: function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
},
placeholder: 'cal-sort-user',
stop: function(e, ui) {
// Dragged element = ui.item.attr('data-group')
// Replaced element = ui.item.prev().attr('data-group')
// Cancel the sorting if Dragged and Replaced id are not equal = $(this).sortable('cancel');
if (ui.item.attr('data-group') != ui.item.prev().attr('data-group')) {
alert('You are not allowed to add users to another group!');
$(this).sortable('cancel'); // cancel the sorting!
}
$(ui.item).css('background-color', '');
$(ui.item).css('z-index', '');
}
}).disableSelection();/* minified because it's not relevant for the question */
.test{height:25px;width:25px;line-height:25px;top:0;right:-24px;position:absolute;background-color:#fff;color:#ff8e00;text-align:center;font-size:13px;box-shadow:1px 1px 3px #b5b5b5;cursor:pointer}.test:hover{color:#fff;background-color:#ff8e00}.table td,.table th{padding:5px!important}th:first-child{position:sticky;left:0;z-index:10030}td:first-child{position:sticky;left:0;z-index:10010}thead th{position:sticky;top:0;z-index:10020}.cal-container{max-width:900px;max-height:500px;overflow:auto;margin:auto}.cal-table{position:relative;border:solid #ebebeb;border-width:0 1px 0 0;overscroll-behavior:contain}.cal-thead{top:0;box-shadow:0 10px 50px rgba(0,0,0,.04)}.cal-viewmonth{font-size:16px;background:#fdfdfd;width:150px;height:50px}.cal-toprow{width:182px;min-width:182px;color:#3e5569;background-color:#f7f9fb!important;border:1px solid #ebebeb!important}.cal-toprow,.cal-viewmonth{font-weight:700!important;text-align:center;vertical-align:middle!important}.cal-userinfo{height:70px;box-shadow:20px 0 50px rgba(0,0,0,.05)}.cal-tbody .cal-userinfo{min-width:150px!important;text-align:right;color:#60666b;font-weight:600;font-size:12px;letter-spacing:.03em;background:#fdfdfd;padding:.3em;border:1px solid #ebebeb}.cal-usersheader{height:20px;box-shadow:20px 0 50px rgba(0,0,0,.05);min-width:150px!important;text-align:center;font-weight:700;font-size:15px;letter-spacing:.03em;padding:.3em}.details{border-radius:4px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.08);border:1px solid #ebecee;padding:0 0 5px 10px;margin:2px;z-index:1}.details-uren{font-size:12px;color:#333;font-weight:500;margin:0;right:0;text-align:right;padding-right:10px}.details-task{margin-top:5px;margin-bottom:2px;font-size:12px;padding:2px 5px;font-weight:600;line-height:1.4;border-radius:2px;width:94%}.cal-user-move{bottom:0;margin-left:5px;position:absolute;color:#3e5569;font-size:18px;cursor:pointer}.cal-user-move:hover{color:#1e895a}.cal-sort-user{border:2px dashed #999;background:#ede8e8;height:85px}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
<div style="margin-bottom: 0;">
<div class="cal-sectionDiv">
<table class="table table-striped table-bordered">
<thead class="cal-thead">
<tr>
<th class="cal-viewmonth" id="changemonth">juli 2020</th>
<th class="cal-toprow">Wednesday 1</th>
<th class="cal-toprow">Thursday 2</th>
<th class="cal-toprow">Friday 3</th>
<th class="cal-toprow weekend">Saturday 4</th>
<th class="cal-toprow weekend">Sunday 5</th>
</tr>
</thead>
<tbody class="cal-tbody">
<tr id="header1">
<td class="cal-usersheader" style="color:#000000; background-color:#B67AEB;">Team 1</td>
<td colspan="5" style="color:#000000; background-color:#B67AEB;"></td>
</tr>
<tr id="u1" data-group="1">
<td class="cal-userinfo">
<span><b style="text-decoration: underline">Van Els</b> Numan</span>
<div class="cal-user-move"><i class="fas fa-arrows-alt-v"></i></div>
</td>
<td class="ui-droppable" data-date1="1/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13956" data-userid="1" style="border-left: 5px solid rgb(81, 255, 0); position: relative;">
<h3 class="details-task" style=" background: #51FF00; color: #000000">Training</h3>
<div class="details-uren">
15:00 - 16:30
</div>
</div>
</td>
<td class="ui-droppable" data-date1="2/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13957" data-userid="1" style="border-left: 5px solid rgb(121, 32, 32); position: relative;">
<h3 class="details-task" style=" background: #792020; color: #FFFFFF">Day Shift</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date1="3/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13959" data-userid="1" style="border-left: 5px solid rgb(175, 0, 0); position: relative;">
<h3 class="details-task" style=" background: #AF0000; color: #FFFFFF">Sick</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="4/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13958" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
07:30 - 16:30
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="5/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12179" data-userid="1" style="border-left: 5px solid rgb(30, 137, 90); position: relative;">
<h3 class="details-task" style=" background: #1E895A; color: #FFFFFF">Vacation</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
</tr>
<tr id="u2" data-group="1">
<td class="cal-userinfo">
<span><b style="text-decoration: underline">Henzen</b> Susanna</span>
<div class="cal-user-move"><i class="fas fa-arrows-alt-v"></i></div>
</td>
<td class="ui-droppable" data-date1="1/7/2020" data-userid="2"></td>
<td class="ui-droppable" data-date1="2/7/2020" data-userid="2">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12326" data-userid="2" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
11:00 - 18:00
</div>
</div>
</td>
<td class="ui-droppable" data-date1="3/7/2020" data-userid="2">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="11978" data-userid="2" style="border-left: 5px solid rgb(255, 184, 72); position: relative;">
<h3 class="details-task" style=" background: #FFB848; color: #000000">Late shift</h3>
<div class="details-uren">
17:00 - 00:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="4/7/2020" data-userid="2">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12189" data-userid="2" style="border-left: 5px solid rgb(189, 0, 0); position: relative;">
<h3 class="details-task" style=" background: #BD0000; color: #FFFFFF">Extra shift</h3>
<div class="details-uren">
21:00 - 04:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="5/7/2020" data-userid="2">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12169" data-userid="2" style="border-left: 5px solid rgb(30, 137, 90); position: relative;">
<h3 class="details-task" style=" background: #1E895A; color: #FFFFFF">Vacation</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
</tr>
<tr id="header2">
<td class="cal-usersheader" style="color:#FFF; background-color:#7a0800;">Team 2</td>
<td colspan="5" style="color:#FFF; background-color:#7a0800;"></td>
</tr>
<tr id="u3" data-group="2">
<td class="cal-userinfo">
<span><b style="text-decoration: underline">Mak</b> Lokman</span>
<div class="cal-user-move"><i class="fas fa-arrows-alt-v"></i></div>
</td>
<td class="ui-droppable" data-date1="1/7/2020" data-userid="3">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12938" data-userid="3" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
12:00 - 19:00
</div>
</div>
</td>
<td class="ui-droppable" data-date1="2/7/2020" data-userid="3">
</td>
<td class="ui-droppable" data-date1="3/7/2020" data-userid="3">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12266" data-userid="3" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
05:00 - 12:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="4/7/2020" data-userid="3">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12286" data-userid="3" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
07:00 - 14:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="5/7/2020" data-userid="3">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12107" data-userid="3" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
</tr>
<tr id="u4" data-group="2">
<td class="cal-userinfo">
<span><b style="text-decoration: underline">Van Els</b> Numan</span>
<div class="cal-user-move"><i class="fas fa-arrows-alt-v"></i></div>
</td>
<td class="ui-droppable" data-date1="1/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13956" data-userid="1" style="border-left: 5px solid rgb(81, 255, 0); position: relative;">
<h3 class="details-task" style=" background: #51FF00; color: #000000">Training</h3>
<div class="details-uren">
15:00 - 16:30
</div>
</div>
</td>
<td class="ui-droppable" data-date1="2/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13957" data-userid="1" style="border-left: 5px solid rgb(121, 32, 32); position: relative;">
<h3 class="details-task" style=" background: #792020; color: #FFFFFF">Day Shift</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date1="3/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13959" data-userid="1" style="border-left: 5px solid rgb(175, 0, 0); position: relative;">
<h3 class="details-task" style=" background: #AF0000; color: #FFFFFF">Sick</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="4/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13958" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
07:30 - 16:30
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date1="5/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12179" data-userid="1" style="border-left: 5px solid rgb(30, 137, 90); position: relative;">
<h3 class="details-task" style=" background: #1E895A; color: #FFFFFF">Vacation</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>