Оповещение о сбрасывании заказа - JQuery
У меня есть список дерева (один родитель и 4 ребенка), если я изменю, в окне предупреждения о положении детей будет отображаться порядок.
например
у меня есть дети 1, 2, 3, 4, и если я перетаскиваю 4 детей и помещаю их в положение 2
оповещение будет отображать порядок как 1, 4, 2, 3.
и ссылка jsfiddle: http://jsfiddle.net/thilakar/AXDQL/.
1 ответ
Решение
** mind reading mode on (please write question that are understandable withouth links **
Вы можете сделать (вы должны использовать функцию остановки, в противном случае предупреждение срабатывает дважды):
$( ".droptrue" ).sortable({
connectWith: "ul.mt",
dropOnEmpty: true,
stop: function(event, ui) {
var order = ui.item.prevAll().length;
alert(order);
//$.post("updateDB.php", order, function(theResponse){
//$("#contentRight").html(theResponse);
//});
}
});
скрипка здесь: http://jsfiddle.net/nicolapeluchetti/AXDQL/2/
РЕДАКТИРОВАТЬ - чтобы сделать то, что вы хотите, вы можете сделать это:
var addPositions = function() {
$('.droptrue').each(function() {
var position = 1;
$(this).children().each(function() {
$(this).data('position', position);
position++;
});
});
};
$(document).ready(function() {
var treeList = "";
treeList = "<ul id=\"createTree\" class=\"droptrue1\">";
for (var key in jsonObj) {
//alert("key: " + key + ", value: " + jsonObj[key])
for (var skey in jsonObj[key]) {
treeList += ("<li class=\"listTree\" id=\"asdf\">" + skey + "<ul class=\"droptrue mt\">");
for (var sskey in jsonObj[key][skey]) {
for (var ssskey in jsonObj[key][skey][sskey]) {
treeList += ("<li class=\"innerList\">" + jsonObj[key][skey][sskey][ssskey] + "</li>");
}
}
treeList += "</ul></li>";
}
}
treeList += "</ul>";
$('#tree').append(treeList);
addPositions();
$(".droptrue").sortable({
connectWith: "ul.mt",
dropOnEmpty: true,
stop: function(event, ui) {
var order = [];
ui.item.closest('ul').children('li').each(function() {
order.push($(this).data('position'));
});
alert(order.join(', '));
//$.post("updateDB.php", order, function(theResponse){
//$("#contentRight").html(theResponse);
//});
}
});
$("ul.droptrue1").sortable();
});
Поиграйте здесь: http://jsfiddle.net/nicolapeluchetti/AXDQL/6