jQueryUI 无需嵌套即可对多个列表进行排序
jQueryUI Sortable multiple lists without nesting
我有什么
我有一个日历，其中使用 PHP、Ajax 和 Jquery 动态加载用户。
用户和 headers 由网格布局预定义。
例如：
<tr>Team 1</tr>
<tr>User A</tr>
<tr>User B</tr>
<tr>Team 2</tr>
<tr>User A</tr>
<tr>User B</tr>
此列表是根据我们数据库中的用户自动加载的。
我需要什么：
我希望能够按照我想要的方式对每个团队进行排序。但不允许混淆团队。
因此，必须禁止用户将用户从 Team 1 删除到 Team 2，反之亦然。
可以通过拖动 up/down 箭头移动用户行
问题：
我正在为每个用户添加 data-group 属性，其中数字声明用户属于哪个组。这在我使用 items: "tr[data-group='1']", 时工作正常，但是当我尝试使 data-group id 动态找到时，该功能停止工作。
所以我正在寻找一种方法来使用 $(ui.item).attr('data-group') 动态查找拖动的 data-group id，并更改 items: 函数以便它接受用户具有相同 data-groupid.
我尝试使用一个函数动态地创建选择器：
items: function(e, ui) {
var d = 'tr[data-group="'+ $(ui.item).attr('data-group') +' "] ';
return d;
},
1 个用户组的工作代码段：
$('.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>
我已经使用 sortable() 附带的 stop: function 做了一个解决方法。
使用 stop: 函数我们可以检查 Dropped 元素和 Replaced 元素是否具有相同的 data-group id。
if (ui.item.attr('data-group') != ui.item.prev().attr('data-group')) {
如果 data-group 与 Dropped 和 Replaced 元素不同
我们使用 cancel 选项恢复排序。
$(this).sortable('cancel');
片段：
$('.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>
我有什么
我有一个日历，其中使用 PHP、Ajax 和 Jquery 动态加载用户。 用户和 headers 由网格布局预定义。
例如：
<tr>Team 1</tr>
<tr>User A</tr>
<tr>User B</tr>
<tr>Team 2</tr>
<tr>User A</tr>
<tr>User B</tr>
此列表是根据我们数据库中的用户自动加载的。
我需要什么：
我希望能够按照我想要的方式对每个团队进行排序。但不允许混淆团队。
因此，必须禁止用户将用户从 Team 1 删除到 Team 2，反之亦然。
可以通过拖动 up/down 箭头移动用户行
问题：
我正在为每个用户添加 data-group 属性，其中数字声明用户属于哪个组。这在我使用 items: "tr[data-group='1']", 时工作正常，但是当我尝试使 data-group id 动态找到时，该功能停止工作。
所以我正在寻找一种方法来使用 $(ui.item).attr('data-group') 动态查找拖动的 data-group id，并更改 items: 函数以便它接受用户具有相同 data-groupid.
我尝试使用一个函数动态地创建选择器：
items: function(e, ui) {
var d = 'tr[data-group="'+ $(ui.item).attr('data-group') +' "] ';
return d;
},
1 个用户组的工作代码段：
$('.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>
我已经使用 sortable() 附带的 stop: function 做了一个解决方法。
使用 stop: 函数我们可以检查 Dropped 元素和 Replaced 元素是否具有相同的 data-group id。
if (ui.item.attr('data-group') != ui.item.prev().attr('data-group')) {
如果 data-group 与 Dropped 和 Replaced 元素不同
我们使用 cancel 选项恢复排序。
$(this).sortable('cancel');
片段：
$('.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>