Layui를 사용하여 드래그 가능한 트리 메뉴 기능을 구현하는 방법
개요:
Layui는 개발자가 빠르게 빌드할 수 있도록 다양한 구성 요소와 플러그인을 제공하는 간단하고 사용하기 쉬운 프런트 엔드 프레임워크입니다. 페이지. 이 기사에서는 Layui를 사용하여 드래그 가능한 트리 메뉴 기능을 구현하는 방법을 소개합니다. 레이유이에서 제공하는 트리 컴포넌트를 이용하고, 드래그 앤 드롭 플러그인으로 확장하여 트리 메뉴의 드래그 앤 드롭 정렬 기능을 구현해보겠습니다.
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script>
<div id="tree"></div> <script> layui.use('tree', function(){ var tree = layui.tree; var data = [ { title: '节点1', id: 1, children: [ { title: '子节点1', id: 11 }, { title: '子节点2', id: 12 } ] }, { title: '节点2', id: 2, children: [ { title: '子节点3', id: 21 }, { title: '子节点4', id: 22 } ] } ]; tree.render({ elem: '#tree', data: data, click: function(obj){ // 点击节点触发的回调函数 } }); }); </script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> layui.use(['tree', 'layer'], function(){ var tree = layui.tree; var layer = layui.layer; var data = [ // 树形菜单数据... ]; tree.render({ elem: '#tree', drag: true, // 开启拖拽功能 data: data, click: function(obj){ // 点击节点触发的回调函数 }, dragend: function(obj){ // 拖拽完成后触发的回调函数 // obj.item为拖拽的节点数据 // obj.target为拖拽的目标节点数据 var item = obj.item; var target = obj.target; // 获取拖拽节点的id和目标节点的id var itemId = item.id; var targetId = target.id; // 将拖拽节点移动到目标节点下 // 请根据实际需求,自行编写移动节点的逻辑 // ... layer.msg('节点 "' + item.title + '" 已成功移动到 "' + target.title + '" 之下'); } }); }); </script>
dragend: function(obj){ var item = obj.item; var target = obj.target; // 获取拖拽节点的id和目标节点的id var itemId = item.id; var targetId = target.id; $.ajax({ url: 'moveNode', type: 'POST', data: { itemId: itemId, targetId: targetId }, success: function(data){ // 根据服务器返回的数据, // 更新树形菜单的结构或重新渲染树形菜单 // ... }, error: function(){ layer.msg('移动节点失败'); } }); }
위 내용은 Layui를 사용하여 드래그 가능한 트리 메뉴 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!