react拖拽组件react-sortable-hoc的使用
短信预约 -IT技能 免费直播动态提醒
使用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的使用的文章就介绍到这了,更多相关react拖拽组件react-sortable-hoc内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341