Layuiを使用してドラッグ可能なツリーメニュー機能を実装する方法

Layui を使用してドラッグ可能なツリー メニュー機能を実装する方法

概要:
Layui は、次の機能を提供するシンプルで使いやすいフロントエンド フレームワークです。豊富なコンポーネントとプラグインにより、開発者はページを迅速に構築できます。この記事では、Layuiを使ってドラッグ可能なツリーメニュー機能を実装する方法を紹介します。 Layuiが提供するツリーコンポーネントを利用し、ドラッグアンドドロッププラグインで展開し、ツリーメニューのドラッグアンドドロップソート機能を実装します。

1. 関連リソースの紹介
   まず、Layui フレームワーク ファイルや関連スタイル ファイルなど、Layui 関連のリソース ファイルを紹介する必要があります。

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

2. ツリー メニューの構築
   HTML では、Layui のツリー コンポーネントを使用してツリー メニューを構築できます。特定のメニュー構造は、実際のニーズに応じて設計できます。

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

3. ドラッグ アンド ドロップ機能の追加
   ドラッグ アンド ドロップ機能を実装するには、ドラッグ アンド ドロップ プラグインを導入し、ツリー メニューにドラッグ コールバック関数を設定する必要があります。 。

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

4. モバイル ノードのロジックを改善する
   実際のニーズに応じて、モバイル ノードのロジックを改善する必要があります。具体的な実装方法は、プロジェクトのニーズに応じて設計できますが、以下は簡単な例のみを示します:

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('移动节点失败');
    }
  });
}

5. 概要
   Layui のツリー コンポーネントを使用し、ドラッグ アンドプラグインをドロップすれば、ドラッグ可能なツリーメニュー機能を実装すると非常に便利です。実際のプロジェクトでは、ニーズに応じて拡張およびカスタマイズすることができ、ユーザーエクスペリエンスをさらに向上させることができます。この記事があなたのお役に立てば幸いです。また、プログラミングが楽しくなることを願っています。

以上がLayuiを使用してドラッグ可能なツリーメニュー機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。