Javascript 如何使用SortableJS获取嵌套列表的顺序&；jQuery

我正在尝试使用&来创建一个嵌套列表，通过

console.log（）

记录列表的新顺序及其子级（类似于层次结构）

我已经尝试了返回null的

这是我的代码及其功能示例：

Javascript（使用Laravel的一小部分组合）：

@foreach（$categories作为$category）
$（文档）.ready（函数（）{
var nestedSortables=[].slice.call（document.querySelectorAll（'.nestedsortable-{{{$category->id}}'）；
//循环遍历每个嵌套的可排序元素
对于（var i=0；iid}”）.getAttribute（“数据catID”）；
const nestedQuery='.nestedsortable-{{{$category->id}}'；
常量标识符='boardId'；
常量parentId='parentId'；
const boardName='boardName'；
const root=document.getElementById（'boardsList-{{{$category->id}}'）；
函数序列化（可排序）{
var序列化=[]；
var children=[].slice.call（sortables.children）；
for（儿童中的变量i）{
var nested=children[i].querySelector（nestedQuery）；
序列化推送({
董事会名称：子[i]。数据集[boardName]，
board_id:子项[i]。数据集[identifier]，
父项id:子项[i]。数据集[parentId]，
子项：嵌套？序列化（嵌套）：[]
});
}
返回序列化；
}
var child_order=序列化（根）；
控制台日志（子命令）；
控制台日志（订单）；
}
}
});
}
});
@endforeach

HTML（混合使用PHP）：

{{$board->name}
{{$board->name}
{{$board->name}

订单的console.log（）输出：

而不是返回所有订单结果。它只返回“克隆战争”和“员工应用程序”订单结果。如何检索所有结果（家长和孩子）

---

感谢您的帮助，如果您需要更多信息，请告诉我。

嵌套排序表示例

注意：在动画中使用嵌套排序表时，建议将fallbackOnBody选项设置为true。 还始终建议将invertSwap选项设置为true，或者swapThreshold选项低于默认值1（例如0.65）

这个答案是这个答案的编辑版本

由于jsbin中未指定id，它返回null或不工作

以下是演示：

var nestedSortables=[].slice.call（document.querySelectorAll（'.nestedsortable'）；
//循环遍历每个嵌套的可排序元素
对于（var i=0；i

JS-Bin
项目1.1
项目2.1
项目2.2
项目3.1
项目3.2
项目3.3
项目3.4
项目2.3
项目2.4
项目1.2
项目1.3
项目1.4
项目2.1
项目2.2
项目2.3
项目2.4
项目1.5
这是你的答案吗？这个@Dlk我尝试了这个，它返回了空输出。@Dlk我也在使用Sortable的内置嵌套功能。这种方法有效，但它只返回子对象的值，而不返回父对象的值。
@foreach($categories as $category)
$(document).ready(function() {
    var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable-{{$category->id}}'));
    // Loop through each nested sortable element
    for (var i = 0; i < nestedSortables.length; i++) {
        $([nestedSortables[i]]).sortable({
            group: 'nested',
            animation: 150,
            fallbackOnBody: true,
            swapThreshold: 0.65,
            store: {
                set: function (sortable) {
                    var order = sortable.toArray();
                    //var catID = document.getElementById("sortable-cards-{{$category->id}}").getAttribute("data-catid");
                    const nestedQuery = '.nested-sortable-{{$category->id}}';
                    const identifier = 'boardId';
                    const parentId = 'parentId';
                    const boardName = 'boardName';
                    const root = document.getElementById('boardsList-{{$category->id}}');
                    function serialize(sortables) {
                        var serialized = [];
                        var children = [].slice.call(sortables.children);
                        for (var i in children) {
                            var nested = children[i].querySelector(nestedQuery);
                            serialized.push({
                                board_name: children[i].dataset[boardName],
                                board_id: children[i].dataset[identifier],
                                parent_id: children[i].dataset[parentId],
                                children: nested ? serialize(nested) : []
                            });
                        }
                        return serialized;
                    }
                    var child_order = serialize(root);
                    console.log(child_order);
                    console.log(order);
                }
            }
        });
    }
});
@endforeach

<div id="boardsList" class="list-group nested-sortable">
   <div class="list-group nested-sortable">
       <div class="list-group-item" data-cat-id="{{$board->category_id}}" data-board-id="{{$board->id}}" data-parent-id="{{$board->parent_id}}">{{$board->name}}
           <div class="list-group nested-sortable">
               <div class="list-group-item" data-cat-id="{{$board->category_id}}" data-board-id="{{$board->id}}" data-parent-id="{{$board->parent_id}}">{{$board->name}}
                   <div class="list-group nested-sortable">
                   </div>
               </div>
           </div>
       </div>
       <div class="list-group nested-sortable">
           <div class="list-group-item" data-cat-id="{{$board->category_id}}" data-board-id="{{$board->id}}" data-parent-id="{{$board->parent_id}}">{{$board->name}}
               <div class="list-group nested-sortable">
               </div>
           </div>
       </div>
   </div>
</div>