react拖拽组件react-sortable-hoc的使用
目录
1.文件1
2.文件2
3.使用
使用react-sortable-hoc实现拖拽
如图：
提示：下面案例可供参考
代码如下（示例）：文件名称：./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}/>
到此这篇关于react拖拽组件react-sortable-hoc的使用的文章就介绍到这了,更多相关react拖拽组件react-sortable-hoc内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
相关文章
Yasmin
2021-05-01
Bunny
2020-11-27
Oria
2023-05-16
Victoria
2023-05-16
Anna
2023-05-16
Jacinthe
2023-05-16
Elita
2023-05-17
Tani
2023-05-18
Viveka
2023-05-18
Karli
2023-05-18
Tia
2023-05-18
Jacinda
2023-07-20
Nova
2023-07-20
Beth
2023-07-20
Viridis
2023-07-20
Georgia
2023-07-20
Shaine
2023-07-20
Isleta
2023-07-20