jquery - Jquery UI Sortable 获取父子位置

Question

小提琴：http : //jsfiddle.net/johndavemanuel/htLx358f/17/

$(document).ready(function(){
    
    // Sort the parents
    $(".sortable").sortable({
        containment: "parent",
        items: "> div",
        handle: ".move",
        tolerance: "pointer",
        cursor: "move",
        opacity: 0.7,
        revert: 300,
        delay: 150,
        dropOnEmpty: true,
        placeholder: "movable-placeholder",
        start: function(e, ui) {
            ui.placeholder.height(ui.helper.outerHeight());
        }
    });
    
    // Sort the children
    $(".group-items").sortable({
        containment: "document",
        items: "> div",
        connectWith: '.group-items'
    });
    
})

我有 3 个 DIV 作为父级，它是可排序的，其中有其他 DIV 作为子级，

我工作得很好我可以对父母和孩子进行排序，我的问题是我怎样才能像这样获得所有人的“序列化”位置

家长 2

孩子 1

孩子 4

---

家长 1

孩子 2

孩子 5

---

家长 3

孩子 3

孩子 6

---

我将用它来保存他们的位置，所以当用户回来时它会像这样

任何帮助将不胜感激。

标签： jquery

Answer 1

function createArrayFromSortableList() {
    var sortables = $(".group-caption");
    sortables.each(function() {
        var fields = [];
        $(this).find('div.group-item.field').each(function() {
            fields.push({
                id: $(this).attr("data-id"),
                sectionID: $(this).closest(".group-caption").find('.section-title').attr("data-id"),
                fieldName: $.trim($(this).find(".field-name").text().replace(/[\t\n]+/g, ' ')),
                fieldPosition: $(this).closest(".group-items").attr("data-column")
            });

        });
        sections.push({
            id: $(this).find('.section-title').attr("id"),
            sectionName: $(this).find('.section-title').text(),
            zfields: fields
        });


    });
    console.log(sections);
    console.log(JSON.stringify(sections));
}

输出：