antd react可拖拽，布局配置

import {
    DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';可拖拽的包

可拖拽：DraggableRow/index.jsx 子组件
import React, {
    useState,useRef } from 'react';
import {
    Modal, Form, Select, Input, Button, Row, Col,Tooltip} from 'antd'
import {
    DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import {
    CloseCircleOutlined, ExclamationCircleOutlined} from '@ant-design/icons';
import styles from './index.less'
import {
    debounce } from 'lodash';
const grid = 8;
const getItemStyle = (isDragging, draggableStyle) => ({
   
    // some basic styles to make the items look a bit nicer
    userSelect: 'none',
    // padding: grid * 4,
    margin: `0 0 ${
   grid}px 0`,

    // change background colour if dragging
    background: isDragging ? '#fff' : '#fff',
    // border: '1px solid #ddd',
    margin: '0px auto 10px auto',
    width:"70%",
    // styles we need to apply on draggables
    ...draggableStyle,
});
const reorder = (list, startIndex, endIndex) => {
   
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);
    let arr = [];
    result.map((v, k) => {
   
        arr.push(v);
    });
    return arr;
};

export default (props)=>{
   
    const {
    list, config } = props;
    const {
   
        activeKey,
        setHomeList,
        setDuapList,
        setVisible,
        setIsEdit,
        setCurrentEditItem,
        setOtherVisible,
        onRowDelete,
        setEditOtherOrder,
        setItemTypeCode,
        renderOrder,
    } = config
    const onDragEnd = (result) => {
    //拖拽结束事件
        console.log('result', result);
        let arr = [...list]
        if (!result.destination) {
   
            return;
        }
        const newList = reorder(arr, result.source.index, result.destination.index);
        let IdList = [];
        if(!!newList && newList.length){
   
            newList.map(item=>{
   
                IdList.push(item.Id)
            })
        }
        if(!!IdList && IdList.length){
   
            renderOrder(IdList)
        }
        if (activeKey == "1001") {
   
            setHomeList(newList)
        }else{
   
            setDuapList(newList)
        }
    }

    const handleEditItem = (e,item,index) =>{
   
        e.preventDefault();
        e.stopPropagation();

        Modal.confirm({
   
            icon: <ExclamationCircleOutlined />,
            content: 'Are you sure to delete?',
            okText: 'Confirm',
            cancelText: 'Cancel',
            onOk() {
   
                onRowDelete(item)
            },
        })
    }

    const handleEditOtherItem = (e, item, index, order) =>{
   
        e.preventDefault();
        e.stopPropagation();
        setOtherVisible(true);
        setIsEdit(true);
        setItemTypeCode(item.DisplayItemDetailList[order-1].ItemType)
        console.log('item', item);
        console.log('index', index);
        console.log('order', order);
        setCurrentEditItem(item);
        setEditOtherOrder(order);
    }

    const onIntroductionEdit = (e, item, index) =>{
   
        e.preventDefault();
        e.stopPropagation();
        setCurrentEditItem(item);
        setVisible(true);
        setIsEdit(true);
    }

    const onVideoEdit = (e, item, index) =>{
   
        e.preventDefault();
        e.stopPropagation();
        setCurrentEditItem(item);
        setVisible(true);
        setIsEdit(true);
    }

    return (
        <div style={
   {
   background:"#fff",paddingBottom:'30px'}}>
            <DragDropContext onDragEnd={
   onDragEnd}>
                <Droppable droppableId="droppable">
                    {
   (provided, snapshot) => (
                        <div ref={
   provided.innerRef} {
   ...provided.droppableProps}>
                            {
   list.map((item, index) => {
   
                                let dom;
                                if (item.FunctionType == 1001) {
     //
                                    dom = <div
                                        editform="false"
                                        key={
   item.Id}
                                        style={
   {
    padding: "0 20px", background: "#fff", position: "relative" }}
                                        // onClick={() => {
   
                                        //     this.showEditModal(item);
                                        // }}
                                    >
                                        <Draggable
                                            shouldRespectForcePress={
   true}
                                            key={
   item.index}
                                            draggableId={
   item.Id}
                                            index={
   index}
                                        >
                                            {
   (provided, snapshot) => (
                                                <div
                                                    ref={
   provided.innerRef}
                                                    {
   ...provided.draggableProps}
                                                    {
   ...provided.dragHandleProps}
                                                    style={
   getItemStyle(
                                                        snapshot.isDragging,
                                                        provided.draggableProps.style
                                                    )}
                                                >
                                                    <div classN