react拖拽组件react-sortable-hoc的使用

宋英俊

使用react-sortable-hoc实现拖拽
如图：

1. 提示：下面案例可供参考

复制代码

1.文件1

代码如下（示例）：文件名称：./dragcomponents

1. import * as React from 'react'
   
2. import {
   
3.     sortableContainer,
   
4.     sortableElement,
   
5.     sortableHandle,
   
6. } from "react-sortable-hoc"; // 拖拽的关键组件
   
7. 
   
8. const Sortable: React.FC<any> = (props) => {
   
9.     const { dataSource = [], ComSortItem, sortEnd } = props;
   
10.     // 拖拽时原列表替换
    
11.     function arrayMoveMutable(array, fromIndex, toIndex) {
    
12.         const startIndex = fromIndex < 0 ? array.length + fromIndex : fromIndex;
    
13.         if (startIndex >= 0 && startIndex < array.length) {
    
14.             const endIndex = toIndex < 0 ? array.length + toIndex : toIndex;
    
15.             const [item] = array.splice(fromIndex, 1);
    
16.             array.splice(endIndex, 0, item);
    
17.         }
    
18.     }
    
19. 
    
20.     // 拖拽时返回新数组
    
21.     function arrayMoveImmutable(array, fromIndex, toIndex) {
    
22.         array = [...array];
    
23.         arrayMoveMutable(array, fromIndex, toIndex);
    
24.         return array;
    
25.     }
    
26. 
    
27.     // 拖拽容器
    
28.     const SortableContainer = sortableContainer(({ children }) => {
    
29.         return <div>{children}</div>;
    
30.     });
    
31. 
    
32.     // 拖拽ico
    
33.     const DragHandle = sortableHandle((value1, sortIndex1) => (
    
34.         <div id='ListItem' className='ListItem' >
    
35.             <div className="ChildCom">
    
36.                 <ComSortItem data={value1} index={sortIndex1} updateData={updateData} />
    
37.             </div>
    
38.         </div>
    
39.     ));
    
40.     function handleDelete(index) {
    
41.         const List = [...dataSource];
    
42.         List.splice(index, 1)
    
43.         sortEnd(List);
    
44.     }
    
45.     // 数据更新
    
46.     function updateData(val, index) {
    
47.         const List = [...dataSource];
    
48. 
    
49.         List[index] = val;
    
50.         sortEnd(List);
    
51.     }
    
52.     // 拖拽体
    
53.     const SortableItem = sortableElement(({ value, sortIndex }) => {
    
54.         return (
    
55.             // <div id='ListItem' className='ListItem' >
    
56.             //     <DragHandle value1={value} sortIndex1={sortIndex} />
    
57.             // </div>
    
58.             <DragHandle valuedata={value} sortIndexdata={sortIndex} />
    
59.         );
    
60.     });
    
61. 
    
62.     // 拖拽后回调
    
63.     const onSortEnd = ({ oldIndex, newIndex }) => {
    
64.         const List = arrayMoveImmutable(dataSource, oldIndex, newIndex);
    
65.         sortEnd(List);
    
66.     };
    
67.     return (
    
68.         <>
    
69.             <SortableContainer onSortEnd={onSortEnd} useDragHandle helperClass="row-dragging-item">
    
70.                 {dataSource.length > 0 &&
    
71.                     dataSource.map((value, index) => (
    
72.                         <SortableItem
    
73.                             key={`sortable-item-${index}`}
    
74.                             index={index}
    
75.                             value={value}
    
76.                             sortIndex={index}
    
77.                         />
    
78.                     ))}
    
79.             </SortableContainer>
    
80.         </>
    
81.     );
    
82. }
    
83. 
    
84. export default Sortable;

复制代码

2.文件2

代码如下（示例）：文件名称’./usedrag’

1. import * as React from 'react'
   
2. import { Checkbox } from 'antd'
   
3. 
   
4. import Sortable from './dragcomponents'
   
5. import './index.scss'
   
6. const _ = require('lodash')
   
7. import store from './store'
   
8. import { SAVE_RENDER_ALL_DATA } from './actionType'
   
9. const Usedrag: React.FC<any> = (props) => {
   
10.     const { state, dispatch } = React.useContext(store);
    
11.     // 自定义拖拽体
    
12.     const {upDateRenderData} = props
    
13.     const showdata ={...props.renderData}
    
14.     function AddForm(showdata) {
    
15.         return (
    
16.             < div className='ItemBox'>
    
17.                
    
18.                 <div className='name'><span className="icon iconfont iconyidongshu"></span>{showdata.data.valuedata.fieldName}</div>
    
19.                 <div className='Opt'>
    
20.                     <span>控件标签显示名称<span>{showdata.data.valuedata.labelName}</span></span>
    
21.                     <span>所占列宽<span>{showdata.data.valuedata.span}</span></span>
    
22.                     {/* <Checkbox onChange={changeChecked} checked={checked} ></Checkbox> */}
    
23.                 </div>
    
24.             </div>
    
25.         )
    
26.     }
    
27. 
    
28.     const updateSource = (val) => {
    
29.         const arrdata: any = _.cloneDeep(props.renderData)
    
30.         const arr: any = _.cloneDeep(val)
    
31.         if(JSON.stringify(arrdata) !== JSON.stringify(arr)){
    
32.             for (let i = 0; i <= arr.length - 1; i++) {
    
33.                 arr[i].edit = 1;
    
34.             }
    
35.         }
    
36.         // upDateRenderData(arr)
    
37.         dispatch({
    
38.             type: SAVE_RENDER_ALL_DATA,
    
39.             value: arr
    
40.         })
    
41.     }
    
42. 
    
43.     return (
    
44.         <div className='RightBox' >
    
45.             <div className='item-con' style={{ overflow: 'auto' }}>
    
46.                 <Sortable
    
47.                     className='sortable'
    
48.                     dataSource={...props.renderData}
    
49.                     ComSortItem={(p) => <AddForm {...p} />}
    
50.                     sortEnd={(val) => {
    
51.                         updateSource(val)
    
52.                     }}
    
53.                 />
    
54.             </div>
    
55.         </div>
    
56.     );
    
57. };
    
58. 
    
59. 
    
60. export default Usedrag

复制代码

3.使用

代码如下（示例）：

1. import Usedrag from './usedrag';
   
2. <Usedrag renderData={renderData}/>

复制代码

到此这篇关于react拖拽组件react-sortable-hoc的使用的文章就介绍到这了,更多相关react拖拽组件react-sortable-hoc内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/276314.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！