Layui를 사용하여 드래그 앤 드롭 다단계 분류 메뉴 기능을 구현하는 방법

<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>

<div id="dragMenu">
  <ul class="layui-tree">
    <!-- 这里是动态生成的菜单内容 -->
  </ul>
</div>

layui.use(['tree', 'util'], function(){
  var tree = layui.tree,
      util = layui.util,
      $ = layui.$;
  
  // 渲染菜单
  tree({
    elem: '#dragMenu',
    nodes: [/* 这里是动态生成的菜单数据 */],
    click: function(node){
      // 菜单点击事件
      console.log(node);
    }
  });
  
  // 监听拖拽排序事件
  tree.on('drag(tree)', function(obj){
    console.log(obj); // 得到拖拽后的数据
  });
});

$.ajax({
  url: 'menuData.php',
  type: 'GET',
  dataType: 'json',
  success: function(data){
    // 将数据转为Layui的菜单数据格式
    var menuData = [];
    for (var i = 0; i < data.length; i++) {
      var node = {
        title: data[i].name,
        id: data[i].id,
        children: []
      };
      menuData.push(node);
    }
    
    // 更新菜单
    tree.reload('dragMenu', {
      data: menuData
    });
  }
});

tree.on('drag(tree)', function(obj){
  var newData = []; // 保存拖拽后的新数据
  
  // 循环遍历所有拖拽后的节点
  for (var i = 0; i < obj.changed.length; i++) {
    var node = obj.changed[i];
    newData.push({
      id: node.id,
      sort: i + 1 // 拖拽后的顺序
    });
  }
  
  // 发送数据到后端进行保存
  $.ajax({
    url: 'saveMenuData.php',
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(newData),
    success: function(result){
      // 处理保存结果
      if (result.code === 0) {
        console.log('保存成功');
      } else {
        console.log('保存失败：' + result.msg);
      }
    }
  });
});