Jquery 对树列表排序后检索父值和子值

我有树列表，但我需要在排序完成时获取父值和子值

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,
   });
});

---

小提琴链接：

好的，现在我明白你需要什么了，希望如此

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（$this.not'：first）。文本将引用li元素，而不是ul元素

---

请尝试这样做：

您到底需要什么？您需要像在停止事件中那样做吗？现在，当我从标题_1拖动时，我将获取标题_2值，并将其放置到标题_2中，但我也需要标题_1值。如果您是指开始拖动时，请查看我的回答谢谢nicola，但是拖放itemfor ex:yellow不会显示两侧，它只会显示在可拖放区域中。因此，您希望从第一个菜单中拖动，并在title_1和title_2中具有相同的元素吗？