时间戳

首页 > 解决方案 > 如何使用 SortableJS 和 jQuery 获取嵌套列表的顺序

javascript - 如何使用 SortableJS 和 jQuery 获取嵌套列表的顺序

问题描述

我正在尝试使用SortableJS和jQuery SortableJS Binding创建一个嵌套列表，记录列表的新顺序，它是通过console.log().

我已经尝试过返回 null 的解决方案。

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

Javascript（使用 Laravel 的小组合）：

@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

HTML（混合使用 PHP）：

<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>

console.log() 订单输出： 可排序示例

而不是返回所有的订单结果。它只返回“克隆战争”和“员工申请”订单结果。我如何能够检索所有结果（父母和孩子）？

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

标签： javascriptphpajaxlaravelsortablejs

解决方案

嵌套排序示例

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

这个答案是这个答案的编辑版本https://stackoverflow.com/a/56589385/12232340

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

这是演示：https ://jsbin.com/kabetolanu/edit?js,output 

var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));

// Loop through each nested sortable element

for (var i = 0; i < nestedSortables.length; i++) {
 new Sortable(nestedSortables[i], {
  group: 'nested',
  animation: 150,
  fallbackOnBody: true,
  swapThreshold: 0.65
 });
}
const nestedQuery = '.nested-sortable';
const identifier = 'sortableId';
const root = document.getElementById('nestedDemo');
function serialize(sortable) {
  var serialized = [];
  var children = [].slice.call(sortable.children);
  for (var i in children) {
var nested = children[i].querySelector(nestedQuery);
serialized.push({
  id: children[i].dataset[identifier],
  children: nested ? serialize(nested) : []
});
  }
  return serialized;
}

console.log(serialize(root));
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

</head>
<body>
<div id="sortableId" class="row">
<div id="nestedDemo" class="list-group col nested-sortable">
	<div data-sortable-id="1.1" class="list-group-item nested-1">Item 1.1
		<div class="list-group nested-sortable">
			<div data-sortable-id="2.1" class="list-group-item nested-2">Item 2.1</div>
			<div data-sortable-id="2.2" class="list-group-item nested-2">Item 2.2
				<div class="list-group nested-sortable">
					<div data-sortable-id="3.1" class="list-group-item nested-3">Item 3.1</div>
					<div data-sortable-id="3.2" class="list-group-item nested-3">Item 3.2</div>
					<div data-sortable-id="3.3" class="list-group-item nested-3">Item 3.3</div>
					<div data-sortable-id="3.4" class="list-group-item nested-3">Item 3.4</div>
				</div>
			</div>
			<div data-sortable-id="2.3" class="list-group-item nested-2">Item 2.3</div>
			<div data-sortable-id="2.4" class="list-group-item nested-2">Item 2.4</div>
		</div>
	</div>
	<div data-sortable-id="1.2" class="list-group-item nested-1">Item 1.2</div>
	<div data-sortable-id="1.3" class="list-group-item nested-1">Item 1.3</div>
	<div data-sortable-id="1.4" class="list-group-item nested-1">Item 1.4
		<div class="list-group nested-sortable">
			<div data-sortable-id="2.1" class="list-group-item nested-2">Item 2.1</div>
			<div data-sortable-id="2.2" class="list-group-item nested-2">Item 2.2</div>
			<div data-sortable-id="2.3" class="list-group-item nested-2">Item 2.3</div>
			<div data-sortable-id="2.4" class="list-group-item nested-2">Item 2.4</div>
		</div>
	</div>
	<div data-sortable-id="1.5" class="list-group-item nested-1">Item 1.5</div>
</div>
<div style="padding: 0" class="col-12">
</div>
</div>
  <script src="https://sortablejs.github.io/Sortable/Sortable.js"></script>
</body>
</html>

这是另一个简单的嵌套解决方案https://github.com/SortableJS/Sortable/blob/master/tests/nested.html

推荐阅读