react拖拽组件react-sortable-hoc如何使用

这篇“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>                    {}                </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}/>

以上就是关于“react拖拽组件react-sortable-hoc如何使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。