Retrieving parent and child values after sorting a treelist

Question

I have tree list but I need to get the parent and child value, when sorting is completed.

jquery

var jsonObj = {
    "department":{
        "Title1":[
            {
                "child1":"Green",
                "child2":"Yellow"
            },
            {
                "child3":"Black",
                "child4":"White"
            }
        ],
        "Title2":[
            {
                "child5":"Violet",
                "child6":"Purple"
            },
            {
                "child7":"Pink",
                "child8":"Orange"
            }
        ]
    }
}

var addPositions = function() {
    $('.droptrue, .droptrue1').each(function() {
        var position = 0;
        $(this).children().each(function() {
            $(this).data('position', position);
            position++;
        });
    });
};

$(document).ready(function() {
var  treeList = "";
treeList = "<ul id=\"createTree\" class=\"droptrue1 mt1\">";
for(var key in jsonObj){
  //alert("key: " + key + ", value: " + jsonObj[key])
    for (var skey in jsonObj[key]) {
        treeList +=  ("<li class=\"listTree\" id="+skey+"><span class=\"Tbltitle\" >"+skey +"</span><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,
/*       start: function(event, ui) { 
         var order = [];
         ui.item.closest('ul').children('li').each(function() {
         order.push($(this).data('position'));  

         var x = $(this).not(':first').text();
         var y = $(this).parent().siblings('.Tbltitle').text();
         $("#c2").append(y+"_"+x+"<br />");
        });
        },
*/       stop: function(event, ui) {
         var order = [];
         ui.item.closest('ul').children('li').each(function() {
         order.push($(this).data('position'));
         var c = $(this).text();
         var z = $(this).parent().siblings('.Tbltitle').text();
         $("#cl").append(z+"_"+c+"<br />");
       });
     }
  });
$( "ul.droptrue1").sortable({
      connectWith: "ul.mt1",
      dropOnEmpty: true,
   });
});

fiddle Link: http://jsfiddle.net/thilakar/mwypv/

Answer 1

Ok, now i understood what you need (i hope)

var origTitle;
var origColor;
$(".droptrue").sortable({
    connectWith: "ul.mt",
    dropOnEmpty: true,
    start: function(event, ui) {
        origColor = ui.item.text();
        origTitle = ui.item.parent().siblings('.Tbltitle').text();
    },
    stop: function(event, ui) {
        var order = [];

        ui.item.closest('ul').children('li').each(function() {
            order.push($(this).data('position'));
            var c = $(this).text();
            if (c === origColor) {
                var z = origTitle;
            } else {
                var z = $(this).parent().siblings('.Tbltitle').text();
            }
            $("#cl").append(z + "_" + c + "<br />");
        });
    }
});

Fiddle http://jsfiddle.net/nicolapeluchetti/mwypv/17/