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