请问是否有这样的前端三方组件？

发布于
1 月 16 日中国

请问是否有这样的前端三方组件？

功能：
1、同级别的容器可以进行左右排序。
2、同级容器可以创建自己的子容器。

前端 vue.js 组件化

阅读 732

AI BotBETA

是的，有这样的前端第三方组件。一个流行的选择是 React Sortable Tree，它专门支持树状结构的拖放排序，包括水平（左右）方向，并且允许节点（容器）创建子容器。以下是详细解释和推荐：

推荐组件：React Sortable Tree

GitHub 仓库：frontend-collective/react-sortable-tree
功能匹配：
- 同级别容器左右排序：它支持水平方向的拖放排序（通过 isHorizontal 属性配置），允许同级别的容器（节点）进行左右排列。
- 创建子容器：每个节点可以拥有子节点（嵌套容器），你可以通过拖放或编程方式添加、删除或移动子容器。

安装方式：

npm install react-sortable-tree
# 或
yarn add react-sortable-tree

简单示例代码（React）：

import React, { useState } from 'react';
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css'; // 引入默认样式

function TreeComponent() {
  const [treeData, setTreeData] = useState([
    { title: '容器1', children: [{ title: '子容器1' }] }, // 同级容器可创建子容器
    { title: '容器2' }, // 同级别容器可左右排序
  ]);

  return (
    <div style={{ height: 400 }}>
      <SortableTree
        treeData={treeData}
        onChange={treeData => setTreeData(treeData)}
        isHorizontal={true} // 设置为水平方向（左右排序）
      />
    </div>
  );
}

在这个示例中：

isHorizontal={true} 启用水平排序。
每个节点（如 容器1）可以通过 children 属性添加子节点。
拖放操作会实时更新树结构。

其他备选组件

如果 React Sortable Tree 不满足需求，以下是类似功能的库：

dnd-kit：一个更现代的拖放库，支持嵌套排序和水平方向。它更灵活，但需要更多自定义代码。适合 React 项目。
- 安装：npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
- 文档链接
Vue.Draggable（Vue 项目）：支持嵌套拖放排序，包括水平方向。使用 Vue.js 时推荐。
- 安装：npm install vuedraggable
- 文档链接
Angular CDK DragDrop（Angular 项目）：内置的拖放模块，支持水平排序和嵌套容器。
- 无需额外安装，Angular CDK 自带。
- 文档链接

注意事项

为什么推荐这些？ 这些库基于你的需求：水平排序（左右方向）和嵌套子容器。React Sortable Tree 是最直接匹配的，因为它专为树状结构设计。
性能考虑：对于大型数据集，确保使用虚拟化（如 react-virtualized 配合）来优化渲染。
图片提示：你提供的图片链接（/img/bVdnFhg）似乎描述了一个类似树或嵌套布局的UI。以上库都能实现类似效果；如果你需要更具体的视觉匹配，可以尝试调整样式或提供更多细节。

如果你有特定的前端框架（如 React、Vue 或 Angular），或者需要更多代码示例，请补充细节！

1 个回答

发布于
1 月 16 日陕西

AI提供的react版本的拖拽
vue版本的看看这个 https://sortablejs.github.io/Vue.Draggable/#/nested-example, nested的示例看着比较符合你的需求
纯js版本的 https://sortablejs.github.io/Sortable/#simple-list

查看全部 1 个回答

推荐问题

相似问题

找不到问题？创建新问题