react 拖拽组件 react-sortable-hoc的使用

react 拖拽组件 react-sortable-hoc

使用react-sortable-hoc实现拖拽

如图：

提示：下面案例可供参考

1.文件1

代码如下（示例）：文件名称：./dragcomponents

import * as React from 'react'
import {
    
    
    sortableContainer,
    sortableElement,
    sortableHandle,
} from "react-sortable-hoc"; // 拖拽的关键组件

const Sortable: React.FC<any> = (props) => {
    
    
    const {
    
     dataSource = [], ComSortItem, sortEnd } = props;
    // 拖拽时原列表替换
    function arrayMoveMutable(array, fromIndex, toIndex) {
    
    
        const startIndex = fromIndex < 0 ? array.length + fromIndex : fromIndex;
        if (startIndex >= 0 && startIndex < array.length) {
    
    
            const endIndex = toIndex < 0 ? array.length + toIndex : toIndex;
            const [item] = array.splice(fromIndex, 1);
            array.splice(endIndex, 0, item);
        }
    }

    // 拖拽时返回新数组
    function arrayMoveImmutable(array, fromIndex, toIndex) {
    
    
        array = [...array];
        arrayMoveMutable(array, fromIndex, toIndex);
        return array;
    }

    // 拖拽容器
    const SortableContainer = sortableContainer(({
    
     children }) => {
    
    
        return <div>{
    
    children}</div>;
    });

    // 拖拽ico
    const DragHandle = sortableHandle((value1, sortIndex1) => (
        <div id='ListItem' className='ListItem' >
            <div className="ChildCom">
                <ComSortItem data={
    
    value1} index={
    
    sortIndex1} updateData={
    
    updateData} />
            </div>
        </div>
    ));
    function handleDelete(index) {
    
    
        const List = [...dataSource];
        List.splice(index, 1)
        sortEnd(List);
    }
    // 数据更新
    function updateData(val, index) {
    
    
        const List = [...dataSource];

        List[index] = val;
        sortEnd(List);
    }
    // 拖拽体
    const SortableItem = sortableElement(({
    
     value, sortIndex }) => {
    
    
        return (
            // <div id='ListItem' className='ListItem' >
            //     <DragHandle value1={value} sortIndex1={sortIndex} />
            // </div>
            <DragHandle valuedata={
    
    value} sortIndexdata={
    
    sortIndex} />
        );
    });

    // 拖拽后回调
    const onSortEnd = ({
    
     oldIndex, newIndex }) => {
    
    
        const List = arrayMoveImmutable(dataSource, oldIndex, newIndex);
        sortEnd(List);
    };
    return (
        <>
            <SortableContainer onSortEnd={
    
    onSortEnd} useDragHandle helperClass="row-dragging-item">
                {
    
    dataSource.length > 0 &&
                    dataSource.map((value, index) => (
                        <SortableItem
                            key={
    
    `sortable-item-${
    
    index}`}
                            index={
    
    index}
                            value={
    
    value}
                            sortIndex={
    
    index}
                        />
                    ))}
            </SortableContainer>
        </>
    );
}

export default Sortable;

2.文件2

代码如下（示例）：文件名称’./usedrag’

import * as React from 'react'
import {
    
     Checkbox } from 'antd'

import Sortable from './dragcomponents'
import './index.scss'
const _ = require('lodash')
import store from './store'
import {
    
     SAVE_RENDER_ALL_DATA } from './actionType'
const Usedrag: React.FC<any> = (props) => {
    
    
    const {
    
     state, dispatch } = React.useContext(store);
    // 自定义拖拽体
    const {
    
    upDateRenderData} = props
    const showdata ={
    
    ...props.renderData}
    function AddForm(showdata) {
    
    
        return (
            < div className='ItemBox'>
                
                <div className='name'><span className="icon iconfont iconyidongshu"></span>{
    
    showdata.data.valuedata.fieldName}</div>
                <div className='Opt'>
                    <span>控件标签显示名称<span>{
    
    showdata.data.valuedata.labelName}</span></span>
                    <span>所占列宽<span>{
    
    showdata.data.valuedata.span}</span></span>
                    {
    
    /* <Checkbox onChange={changeChecked} checked={checked} ></Checkbox> */}
                </div>
            </div>
        )
    }

    const updateSource = (val) => {
    
    
        const arrdata: any = _.cloneDeep(props.renderData)
        const arr: any = _.cloneDeep(val)
        if(JSON.stringify(arrdata) !== JSON.stringify(arr)){
    
    
            for (let i = 0; i <= arr.length - 1; i++) {
    
    
                arr[i].edit = 1;
            }
        }
        // upDateRenderData(arr)
        dispatch({
    
    
            type: SAVE_RENDER_ALL_DATA,
            value: arr
        })
    }

    return (
        <div className='RightBox' >
            <div className='item-con' style={
    
    {
    
     overflow: 'auto' }}>
                <Sortable
                    className='sortable'
                    dataSource={
    
    ...props.renderData}
                    ComSortItem={
    
    (p) => <AddForm {
    
    ...p} />}
                    sortEnd={
    
    (val) => {
    
    
                        updateSource(val)
                    }}
                />
            </div>
        </div>
    );
};


export default Usedrag

3.使用

代码如下（示例）：

import Usedrag from './usedrag';
<Usedrag renderData={
    
    renderData}/>

---