这篇“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 Usedrag3.使用
代码如下（示例）：
import Usedrag from './usedrag';<Usedrag renderData={renderData}/>以上就是关于“react拖拽组件react-sortable-hoc如何使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
