У меня есть 3 деления, в которых я перетаскиваю значение, но в то же время происходит событие div sortable
. Как я могу запустить сортируемое событие после того, как я закончу sh drag and procedure
.
Используя сначала приведенный ниже код, я перетаскиваю.
var pushSectionIdvalueLayer1 = [];
var pushSectionIdvalueLayer2 = [];
var pushSectionIdvalueLayer3 = [];
var sectionDataLayer1 = [];
var sectionDataLayer2 = [];
var sectionDataLayer3 = [];
$(function() {
var bSortable1Show = false;
var bSortable2Show = false;
var bSortable3Show = false;
var iTotalItems = $("ul#sectionlist").children().length;
var iCntSortable1 = $("ul#sortable1").children().length;
var iCntSortable2 = $("ul#sortable2").children().length;
var iCntSortable3 = $("ul#sortable3").children().length;
function triggerSortable() {
var iCntSortable1 = $("ul#sortable1").children().length;
var iCntSortable2 = $("ul#sortable2").children().length;
var iCntSortable3 = $("ul#sortable3").children().length;
$(".ul-container").removeClass('connected ui-sortable');
$(".ul-container").addClass('not-connected');
if (iCntSortable1 == 0) {
$("ul#sortable1").addClass('connected ui-sortable');
} else if (iCntSortable1 > 0 && iCntSortable1 === (iCntSortable2 + 1)) {
$("ul#sortable2").addClass('connected ui-sortable');
} else if (iCntSortable1 > 0 && iCntSortable1 === iCntSortable2 && iCntSortable2 === (iCntSortable3 + 1)) {
$("ul#sortable3").addClass('connected ui-sortable');
} else if (iCntSortable1 > 0 && iCntSortable1 === iCntSortable2 && iCntSortable2 === iCntSortable3) {
$("ul#sortable1").addClass('connected ui-sortable');
}
}
$(".connected").sortable({
connectWith: ".connected",
start: function(event, ui) {
triggerSortable();
},
update: function(event, ui) {
triggerSortable();
}
}).disableSelection();
triggerSortable();
});
Параллельно 3 div sortable
события пожаров. Я хочу запустить это событие после завершения моей операции.
$(function() {
$("#sectionlist").sortable({
update: function(e, ui) {
items = $("#sectionlist li");
preference = 0;
for (var x = 0; x < items.length; x++) {
preference += 1;
}
}
}).disableSelection();
});
$(function() {
$("#sortable1").sortable({
update: function(e, ui) {
items = $("#sortable1 li");
preferenceLayer1 = 0;
sectionDataLayer1 = [];
check = [];
pushSectionIdvalueLayer1 = [];
for (var x = 0; x < items.length; x++) {
pushSectionIdvalueLayer1.push(preferenceLayer1);
sectionDataLayer1.push(items[x].id);
preferenceLayer1 += 1;
}
}
}).disableSelection();
});
$(function() {
$("#sortable2").sortable({
update: function(e, ui) {
items = $("#sortable2 li");
preferenceLayer2 = 0;
sectionDataLayer2 = [];
pushSectionIdvalueLayer2 = [];
for (var x = 0; x < items.length; x++) {
pushSectionIdvalueLayer2.push(preferenceLayer2);
sectionDataLayer2.push(items[x].id);
preferenceLayer2 += 1;
}
}
}).disableSelection();
});
$(function() {
$("#sortable3").sortable({
update: function(e, ui) {
items = $("#sortable3 li");
//console.log(items.length);
preferenceLayer3 = 0;
sectionDataLayer3 = [];
pushSectionIdvalueLayer3 = [];
for (var x = 0; x < items.length; x++) {
pushSectionIdvalueLayer3.push(preferenceLayer3);
sectionDataLayer3.push(items[x].id);
preferenceLayer3 += 1;
}
}
}).disableSelection();
});
Вот мой HTML код
<table id="classTable" class="table table-bordered">
<thead>
</thead>
<tbody>
<tr>
<td>Level 1</td>
<td>Level 2</td>
<td>Level 3</td>
<td>All Section</td>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save" class="btn btn-primary" OnClick="btnSave_Click" />
</td>
</tr>
<tr>
<td>
<ul id="sortable1" class="ul-container connected" title="Level1">
<li></li>
</ul>
</td>
<td>
<ul id="sortable2" class="ul-container connected" title="Level2">
<li></li>
</ul>
</td>
<td>
<ul id="sortable3" class="ul-container connected" title="Level3">
<li></li>
</ul>
</td>
<td>
<ul id="sectionlist" class="connected" title="SectionName" style="overflow:scroll;height:400px;">
</ul>
</td>
</tr>
</tbody>
</table>
Я хочу запустить этот СОРТИРУЕМЫЙ КОД в тот момент, когда администратор нажимает на кнопку.
Я пробовал это, но это не работает:
$("#<%= btnSave.ClientID %>").on('click', function() {
$('#sortable1').sortable('option', 'update');
$('#sortable2').sortable('option', 'update');
$('#sortable3').sortable('option', 'update');
});
Вот решение моего ВОПРОСА: - Пожалуйста, посмотрите
$("#<%= btnSave.ClientID %>").on('click', function () {
if (qString == "1") {
//debugger;
updateDivInEditMode();
}
});
function updateDivInEditMode() {
//For Level1
var items1 = $("#sortable1 li");
var preferenceLayer1 = 0;
sectionDataLayer1 = [];
check = [];
pushSectionIdvalueLayer1 = [];
for (var x = 0; x < items1.length; x++) {
pushSectionIdvalueLayer1.push(preferenceLayer1);
sectionDataLayer1.push(items1[x].id);
preferenceLayer1 += 1;
}
//For Level2
var items2 = $("#sortable2 li");
var preferenceLayer2 = 0;
sectionDataLayer2 = [];
pushSectionIdvalueLayer2 = [];
for (var x = 0; x < items2.length; x++) {
pushSectionIdvalueLayer2.push(preferenceLayer2);
sectionDataLayer2.push(items2[x].id);
preferenceLayer2 += 1;
}
//For Level3
var items3 = $("#sortable3 li");
var preferenceLayer3 = 0;
sectionDataLayer3 = [];
pushSectionIdvalueLayer3 = [];
for (var x = 0; x < items3.length; x++) {
pushSectionIdvalueLayer3.push(preferenceLayer3);
sectionDataLayer3.push(items3[x].id);
preferenceLayer3 += 1;
}
}
Я снова использовал тот же код в отдельной функции