// 拖拽组件
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> }