我有树名单(一个父母和4个孩子),如果我改变孩子的位置警告框将显示顺序。
例如
我有孩子1,2,3,4如果我拖动4个孩子并将其放在2个位置
警告将显示1,4,2,3等订单。
和jsfiddle链接:http://jsfiddle.net/thilakar/AXDQL/。
答案 0 :(得分: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();
});