Я использую сортируемое js для перетаскивания. И перетаскиваемый div добавляется динамически (функция изменения семестра). Теперь более чем один элемент может быть перетащен в целевой div. Как это ограничить? Я проверил количество дочерних элементов и его ввести в условие. но не знаю, как предотвратить это событие. Первая функция щелчка для добавления tbody, здесь мы перетаскиваем элементы.
$(document).on("click", "#btnGenerate", function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({ Timetableid: $("#TimeTable").val() }),
url: "@Url.Action("GetTimeTableDetail", "TimeTable")",
success: function (response) {
var maxperiod = Math.max(response.Sunday, response.Monday, response.Tuesday, response.Wednesday, response.Thursday, response.Friday, response.Saturday);
var theadhtml = '';
var sundayhtml = '';
for (var i = 1; i <= maxperiod; i++) {
theadhtml += '<th>Period' + i + '</th>';
}
for (var i = 1; i <= response.Sunday; i++) {
sundayhtml += '<td class="col-md-1 Period' + i + ' sundayPeriods' + i + '"><div id="example3-right'+i+'" class="" data-max="1"></div></td>';
}
$("#tableWeek thead tr").find("th:gt(0)").remove();
$("#tableWeek thead tr").append(theadhtml);
$("#tableWeek tbody tr").find("tr:gt(0)").remove();
$("#tableWeek tbody").find(".sunday").append(sundayhtml);
for (var i = 1; i <= response.Sunday; i++) {
var example3Right = document.getElementById('example3-right'+i)
new Sortable(example3Right, {
group: {
name: 'shared',
pull: 'clone',
disabled: false,
},
onChange: function (/**Event*/evt) {
alert("changed")
var self = $(this);
alert(evt.to.childElementCount)
if (evt.to.childElementCount > 0) {
evt.sender.draggable('cancel');//this is not working
}
},
animation: 150
});
}
},
error: function (response) {
alert(response)
}
});
return false;
})
$(document).on("change", "#Semester", function () {
$(this).valid();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({}),
url: "@Url.Action("fillStaffDetails", "TimeTable")",
success: function (response) {
var htmlStaffs = ''
$.each(response, function (key, value) {
htmlStaffs +=
'<div class="list-group-item" draggable="true">' + value.FirstName +
'</div>';
});
$("#example3-left").empty();
$("#example3-left").append(htmlStaffs);
var example3Left = document.getElementById('example3-left')
new Sortable(example3Left, {
group: {
name: 'shared',
pull: 'clone',
disabled: false// To clone: set pull to 'clone'
},
animation: 150
});
}
})
});
`