list-dnd v1.1.3

list-dnd

一个基于 antd 组件开源的可拖拽的 List 组件！

安装

npm install list-dnd --save

引用

import ListDnd from "list-dnd";

属性

• 兼容 antd List，List.Item， List.Item.Meta 组件的属性，
• 新增属性如下：
• 1、avatar 属性 数据中直接传 avatar = "url" 即可。

• 2、isMeta 属性 是否启用 Meta， isMeta = true 即启用，默认 false。

• 数据必须有主键 id。

• 数据格式如下：

使用

• 示例 1:

import React from "react";
import ListDnd from "list-dnd";

const data = [
  {
    id: "1",
    title: "Title 1",
    description: "Description 1",
    children: [
      {
        id: "1-1",
        title: "children 1-1",
        description: "children 1-1",
        children: [
          {
            id: "1-1-1",
            title: "children 1-1-1",
            description: "children 1-1-1",
          },
          {
            id: "1-1-2",
            title: "children 1-1-2",
            description: "children 1-1-2",
          },
        ],
      },
      {
        id: "1-2",
        title: "children 1-2",
        description: "children 1-2",
        children: [
          {
            id: "1-2-1",
            title: "children 1-2-1",
            description: "children 1-2-1",
          },
          {
            id: "1-2-2",
            title: "children 1-2-2",
            description: "children 1-2-2",
          },
        ],
      },
    ],
  },
  {
    id: "2",
    title: "Title 2",
    description: "Description 2",
  },
  {
    id: "3",
    title: "Title 3",
    description: "Description 3",
  },
  {
    id: "4",
    title: "Title 4",
    description: "Description 4",
  },
];

const Demo = () => {
  const [list, setList] = React.useState(data);

  const getListItems = (items) => {
    setList(items);
  };

  return <ListDnd data={list} getListItems={getListItems} isMeta={true} />;
};

• 示例 2:

import React from "react";
import ListDnd from "list-dnd";

onst data = [
    { id: "1", title:'title 1.'},
    { id: "2", title:'title 2.'},
    { id: "3", title:'title 3'},
    { id: "4", title:'title 4'},
];

const Demo = () => {
  const [list, setList] = React.useState(data);

  const getListItems = (items) => {
    setList(items);
  };

  return <ListDnd data={list} getListItems={getListItems} />;
};

效果