拖拽组件
Posted 丶陌年微凉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖拽组件相关的知识，希望对你有一定的参考价值。
// 拖拽组件
import React, { useEffect, useState } from "react"
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import \'./style.less\';
// 重新记录数组顺序
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 Drag(props) {
const [data, setData] = useState([])
useEffect(() => {
setData(props.data)
}, [])
useEffect(() => {
setData(props.data)
}, [props.data])
//拖拽结束
const onDragEnd = (result) => {
if (!result.destination) {
return;
}
//获取拖拽后的数据 重新赋值
const newData = reorder(data, result.source.index, result.destination.index)
setData(newData);
props.fnDrag(newData);
}
return <DragDropContext onDragEnd={onDragEnd}>
{/* direction代表拖拽方向 默认垂直方向:vertical 水平方向:horizontal */}
<Droppable droppableId="droppable" direction=\'vertical\'>
{(provided, snapshot) => (
//这里是拖拽容器 在这里设置容器的宽高等等...
<div
{...provided.droppableProps}
ref={provided.innerRef}
className=\'metarialgroupDragBox\'
>
{/* 这里放置所需要拖拽的组件,必须要被 Draggable 包裹 */}
{
data.map((item, index) => (
<Draggable
index={index}
key={item.key}
draggableId={item.key}
>
{(provided, snapshot) => (
//在这里写你的拖拽组件的样式 dom 等等...
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className=\'boxItem\'
// style={{ ...getItemStyle(), ...provided.draggableProps.style }}
>
{/* {item.name} */}
{props.list && props.list(item)}
</div>
)}
</Draggable>
))
}
{/* 这个不能少 */}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
}
以上是关于拖拽组件的主要内容，如果未能解决你的问题，请参考以下文章