排序树列表后检索父值和子值答案

【问题标题】：Retrieving parent and child values after sorting a treelist排序树列表后检索父值和子值
【发布时间】：2011-08-01 09:16:27
【问题描述】：

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

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

小提琴链接：http://jsfiddle.net/thilakar/mwypv/

【问题讨论】：

你到底需要什么？你需要像在停止事件中那样做吗？
现在，当我从 title_1 拖动并将其放入 title_2 时，我将获得 title_2 值，但我也需要 title_1 值。
如果你的意思是当你开始拖动的时候，看看我的回答
感谢nicola，但是拖放项目（例如：黄色）不会显示两侧，它只会显示在可放置区域。
所以你想从第一个菜单中拖动并且在title_1和title_2中拥有相同的元素？

标签： jquery html jquery-ui-sortable jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

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

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 />");
        });
    }
});

小提琴http://jsfiddle.net/nicolapeluchetti/mwypv/17/

【讨论】：

【解决方案2】：

$(this).not(':first').text() 将引用 li 元素，而不是 ul 元素。

试试这样的：http://jsfiddle.net/mwypv/13/

【讨论】：