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

Editor

目录

1.文件1

2.文件2

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

202302240936154.png

提示：下面案例可供参考

1.文件1
代码如下（示例）：文件名称：./dragcomponents
import * as React from 'react'
import {
    sortableContainer,
    sortableElement,
    sortableHandle,
} from "react-sortable-hoc"; // 拖拽的关键组件
const Sortable: React.FC = (props) => {
    const { dataSource = [], ComSortItem, sortEnd } = props;
    // 拖拽时原列表替换
    function arrayMoveMutable(array, fromIndex, toIndex) {
        const startIndex = fromIndex = 0 && startIndex  {
        return {children};
    });
    // 拖拽ico
    const DragHandle = sortableHandle((value1, sortIndex1) => (
        
            
               
            
        
    ));
    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 (
            //
            //     
            //
            
        );
    });
    // 拖拽后回调
    const onSortEnd = ({ oldIndex, newIndex }) => {
        const List = arrayMoveImmutable(dataSource, oldIndex, newIndex);
        sortEnd(List);
    };
    return (
        
            
                {dataSource.length > 0 &&
                    dataSource.map((value, index) => (
                        
                    ))}
            
        
    );
}
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 = (props) => {
    const { state, dispatch } = React.useContext(store);
    // 自定义拖拽体
    const {upDateRenderData} = props
    const showdata ={...props.renderData}
    function AddForm(showdata) {
        return (
            
               
                {showdata.data.valuedata.fieldName}
               
                    控件标签显示名称{showdata.data.valuedata.labelName}
                    所占列宽{showdata.data.valuedata.span}
                    {/*  */}
               
            
        )
    }
    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
            
                 }
                    sortEnd={(val) => {
                        updateSource(val)
                    }}
                />
            
        
    );
};

export default Usedrag
3.使用
代码如下（示例）：
import Usedrag from './usedrag';
[U]
到此这篇关于react拖拽组件react-sortable-hoc的使用的文章就介绍到这了,更多相关react拖拽组件react-sortable-hoc内容请搜索知鸟论坛以前的文章或继续浏览下面的相关文章希望大家以后多多支持知鸟论坛！

我的苦恼冉

既然你诚信诚意的推荐了，那我就勉为其难的看看吧！知鸟论坛不走平凡路。

十二音阶囤

感谢楼主的无私分享！要想知鸟论坛好 就靠你我他

123456809

论坛不能没有像楼主这样的人才啊！我会一直支持知鸟论坛。

落败的青春阳落s

楼主太厉害了！楼主，I*老*虎*U！我觉得知鸟论坛真是个好地方！

123456833

楼主，我太崇拜你了！我想我是一天也不能离开知鸟论坛。

伊索谗言

这个帖子不回对不起自己！我想我是一天也不能离开知鸟论坛。

永远爱你冰塘

其实我一直觉得楼主的品味不错！呵呵！知鸟论坛太棒了！

永远就三年疗

我看不错噢 谢谢楼主！知鸟论坛越来越好！

井底燕雀傥

这东西我收了！谢谢楼主！知鸟论坛真好！