提醒下单 - jquery答案

【问题标题】：Alert the dropping order - jquery提醒下单 - jquery
【发布时间】：2011-07-26 10:37:58
【问题描述】：

我有树列表（一个父级和 4 个子级），如果我更改子级位置警报框将显示顺序。

例如

我有孩子 1、2、3、4，如果我拖动 4 个孩子并将其放在 2 位置

alert 会显示 1、4、2、3 的顺序。

和 jsfiddle 链接：http://jsfiddle.net/thilakar/AXDQL/.

【问题讨论】：

实时链接是一个很好的辅助问题，但也总是发布相关代码在问题中。两个原因。 1.人们不应该通过链接来帮助你。 2. StackOverflow 不仅是为您现在提供的资源，也是为将来遇到类似问题的其他人提供的资源。外部链接可以被移动、修改、删除等。通过确保相关代码在问题中，我们确保问题（及其答案）在合理的时间内保持有用。
我已经编辑了这个问题。请检查.....谢谢
我还是不明白你在问什么。你能写一个以“如何”开头并以问号结尾的句子吗？我建议你这样做，即使 Nicola 奇迹般地读懂了你的想法（我不知道他的回答是否解决了你的需要）。

标签： jquery html jquery-ui-sortable

【解决方案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

【讨论】：