jQueryUI 可排序多个列表而无需嵌套
Posted
技术标签:
【中文标题】jQueryUI 可排序多个列表而无需嵌套【英文标题】：jQueryUI Sortable multiple lists without nesting 【发布时间】：2020-12-20 13:17:55 【问题描述】：我有什么
我有一个使用 php、Ajax 和 Jquery 动态加载用户的日历。 用户和标题由网格布局预定义。
例如：
<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，反之亦然。
可以通过拖动向上/向下箭头来移动用户行
问题：
我将data-group 属性添加到每个用户，其中数字声明用户所属的组。当我使用items: "tr[data-group='1']", 时，这很好用但是当我尝试动态找到数据组 id 时，函数停止工作。
所以我正在寻找一种方法来使用$(ui.item).attr('data-group') 动态查找拖动的data-group id，并更改items: 函数，以便它接受用户具有相同data-group id 的排序。
我尝试使用函数动态地制作选择器：
items: function(e, ui)
var d = 'tr[data-group="'+ $(ui.item).attr('data-group') +' "] ';
return d;
,
为 1 个用户组工作的 sn-p：
$('.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 */
.testheight: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:hovercolor:#fff;background-color:#ff8e00.table td,.table thpadding:5px!importantth:first-childposition:sticky;left:0;z-index:10030td:first-childposition:sticky;left:0;z-index:10010thead thposition:sticky;top:0;z-index:10020.cal-containermax-width:900px;max-height:500px;overflow:auto;margin:auto.cal-tableposition:relative;border:solid #ebebeb;border-width:0 1px 0 0;overscroll-behavior:contain.cal-theadtop:0;box-shadow:0 10px 50px rgba(0,0,0,.04).cal-viewmonthfont-size:16px;background:#fdfdfd;width:150px;height:50px.cal-toprowwidth:182px;min-width:182px;color:#3e5569;background-color:#f7f9fb!important;border:1px solid #ebebeb!important.cal-toprow,.cal-viewmonthfont-weight:700!important;text-align:center;vertical-align:middle!important.cal-userinfoheight:70px;box-shadow:20px 0 50px rgba(0,0,0,.05).cal-tbody .cal-userinfomin-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-usersheaderheight: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.detailsborder-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-urenfont-size:12px;color:#333;font-weight:500;margin:0;right:0;text-align:right;padding-right:10px.details-taskmargin-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-movebottom:0;margin-left:5px;position:absolute;color:#3e5569;font-size:18px;cursor:pointer.cal-user-move:hovercolor:#1e895a.cal-sort-userborder: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>【问题讨论】：
【参考方案1】：我已经使用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 */
.testheight: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:hovercolor:#fff;background-color:#ff8e00.table td,.table thpadding:5px!importantth:first-childposition:sticky;left:0;z-index:10030td:first-childposition:sticky;left:0;z-index:10010thead thposition:sticky;top:0;z-index:10020.cal-containermax-width:900px;max-height:500px;overflow:auto;margin:auto.cal-tableposition:relative;border:solid #ebebeb;border-width:0 1px 0 0;overscroll-behavior:contain.cal-theadtop:0;box-shadow:0 10px 50px rgba(0,0,0,.04).cal-viewmonthfont-size:16px;background:#fdfdfd;width:150px;height:50px.cal-toprowwidth:182px;min-width:182px;color:#3e5569;background-color:#f7f9fb!important;border:1px solid #ebebeb!important.cal-toprow,.cal-viewmonthfont-weight:700!important;text-align:center;vertical-align:middle!important.cal-userinfoheight:70px;box-shadow:20px 0 50px rgba(0,0,0,.05).cal-tbody .cal-userinfomin-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-usersheaderheight: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.detailsborder-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-urenfont-size:12px;color:#333;font-weight:500;margin:0;right:0;text-align:right;padding-right:10px.details-taskmargin-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-movebottom:0;margin-left:5px;position:absolute;color:#3e5569;font-size:18px;cursor:pointer.cal-user-move:hovercolor:#1e895a.cal-sort-userborder: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>【讨论】：
以上是关于jQueryUI 可排序多个列表而无需嵌套的主要内容，如果未能解决你的问题，请参考以下文章