问题描述
我有什么
我有一个日历，使用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:函数的方法，以便它接受用户具有相同{{1 }} ID。
我尝试使用函数动态地使选择器：
data-group1个用户组的工作片段：
items: function(e,ui) {
var d = 'tr[data-group="'+ $(ui.item).attr('data-group') +' "] ';
return d;
},$('.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.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,.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,.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,.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,.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}解决方法
我已经使用stop: function随附的sortable()进行了解决。
使用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,.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,.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,.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,.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); 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,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); 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,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,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,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,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,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>