react拖拽组件react-sortable-hoc的使用
使用react-sortable-hoc实现拖拽如图：
https://img.jbzj.com/file_images/article/202302/202302240936154.png
提示：下面案例可供参考
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 = 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 = 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.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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
来源:https://www.jb51.net/article/276314.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]