import React, { useEffect, useState } from "react"

import { Tree, message } from 'antd'; //导入antd 的Tree组件

export default function App() {

const [data, setData] = useState([])

useEffect(() => {

if (data.length === 0) {

//初始化数据

setData([{ title: "组1", key: 1 },

{ title: "组2", key: 2, children: [{ title: "子组1", key: 6 }, { title: "子组2", key: 7 }, { title: "子组3", key: 9 }] },

{ title: "组3", key: 3 },

{ title: "组4", key: 4 }])

}

}, [data])

//完成拖拽

const onDrop = info => {

/**

* 这里是判断 拖拽之后的动作是否允许存在跨级拖拽交换位置等等...

* 若需要判断可以取消注释

*/

// let nodePosArr = info.node.pos.split('-')

// let dropPosArr = info.dragNode.pos.split('-')

// if (dropPosArr.length === nodePosArr.length && nodePosArr[1] !== dropPosArr[1]) return message.error("不可拖入其他类别")

// if (nodePosArr.length !== dropPosArr.length) return message.error("列表禁止跨级拖拽")

// if (!info.dropToGap) return message.error("同级列表只能互换顺序")

const dropKey = info.node.props.eventKey;

const dragKey = info.dragNode.props.eventKey;

const dropPos = info.node.props.pos.split('-');

const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

const loop = (data, key, callback) => {

for (let i = 0; i < data.length; i++) {

if (data[i].key === key) {

return callback(data[i], i, data);

}

if (data[i].children) {

loop(data[i].children, key, callback);

}

}

};

const changeData = [...data];

// Find dragObject

let dragObj;

loop(changeData, dragKey, (item, index, arr) => {

arr.splice(index, 1);

dragObj = item;

});

if (!info.dropToGap) {

// Drop on the content

loop(data, dropKey, item => {

item.children = item.children || [];

// where to insert 示例添加到尾部，可以是随意位置

item.children.push(dragObj);

});

} else if (

(info.node.props.children || []).length > 0 && // Has children

info.node.props.expanded && // Is expanded

dropPosition === 1 // On the bottom gap

) {

loop(data, dropKey, item => {

item.children = item.children || [];

// where to insert 示例添加到头部，可以是随意位置

item.children.unshift(dragObj);

});

} else {

let ar;

let i;

loop(data, dropKey, (item, index, arr) => {

ar = arr;

i = index;

});

if (dropPosition === -1) {

ar.splice(i, 0, dragObj);

} else {

ar.splice(i + 1, 0, dragObj);

}

}

//changeData就是拖拽结束后改变的数据格式, 需要在这里重新赋值 即可显示最新拖拽之后的结果

setData(changeData)

};

/**

*

* @param {Array} selectedKeys 选中的key 数组存放,单多选

* @param {Node} e 被选择中的node信息,可以拿到 数据源, 层级关系等...

*/

//完成选择

const onSelect = (selectedKeys, e) => {

console.log(selectedKeys, e);

}

return

draggable //是否可以拖拽

blockNode //是否节点占据一行

showLine //是否展示连接线

treeData={data} //数据源 格式 Array 每项的数据格式Object { key:..., title:...,... }

onDrop={onDrop} //拖拽结束后触发的回调函数

onSelect={onSelect} // 选中某一级的回调函数

/>

>

}

这个拖拽组件用于列表拖拽,只可以水平,垂直拖拽.拖拽的UI非常不错, 可以动态增删列表

import React, { useEffect, useState } from "react"

import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

//每一项的样式

const getItemStyle = () => ({

background: "white",

height: 50,

border: "1px solid red",

width: "100%",

margin: "0 0 20px 0"

})

// 重新记录数组顺序

const reorder = (list, startIndex, endIndex) => {

const result = Array.from(list);

//删除并记录 删除元素

const [removed] = result.splice(startIndex, 1);

//将原来的元素添加进数组

result.splice(endIndex, 0, removed);

return result;

};

export default function App() {

const [data, setData] = useState([])

useEffect(() => {

if (data.length === 0) {

//初始化数据

const newData = Array.from({ length: 5 }, (item, index) => ({ key: "key" + index, content: "item" + index }))

setData(newData)

}

}, [data])

//拖拽结束

const onDragEnd = (result) => {

if (!result.destination) {

return;

}

//获取拖拽后的数据 重新赋值

const newData = reorder(data, result.source.index, result.destination.index)

setData(newData)

}

return

{/* direction代表拖拽方向 默认垂直方向 水平方向:horizontal */}

{(provided, snapshot) => (

//这里是拖拽容器 在这里设置容器的宽高等等...

{...provided.droppableProps}

ref={provided.innerRef}

style={{

width: 800,

padding: 10

}}

>

{/* 这里放置所需要拖拽的组件,必须要被 Draggable 包裹 */}

{

data.map((item, index) => (

index={index}

key={item.key}

draggableId={item.key}

>

{(provided, snapshot) => (

//在这里写你的拖拽组件的样式 dom 等等...

ref={provided.innerRef}

{...provided.draggableProps}

{...provided.dragHandleProps}

style={{ ...getItemStyle(), ...provided.draggableProps.style }}

>

{item.content}

)}

))

}

{/* 这个不能少 */}

{provided.placeholder}

)}

}