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

 更新时间:2023年02月24日 09:34:54   作者:小菜鸟飞飞飞~  
本文主要介绍了react拖拽组件react-sortable-hoc的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

使用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>
                    {/* <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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈React Refs 使用场景及核心要点

    浅谈React Refs 使用场景及核心要点

    本文主要介绍了React Refs 使用场景及核心要点,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • React高阶组件使用详细介绍

    React高阶组件使用详细介绍

    高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React高阶组件使用小结,一起看看吧
    2023-01-01
  • 详解React Native 采用Fetch方式发送跨域POST请求

    详解React Native 采用Fetch方式发送跨域POST请求

    这篇文章主要介绍了详解React Native 采用Fetch方式发送跨域POST请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • react优雅处理多条件鼠标拖拽位移

    react优雅处理多条件鼠标拖拽位移

    这篇文章主要为大家详细介绍了react优雅处理多条件鼠标拖拽位移,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • React中进行条件渲染的实现方法

    React中进行条件渲染的实现方法

    React是一种流行的JavaScript库,它被广泛应用于构建Web应用程序,在React中,条件渲染是一个非常重要的概念,它允许我们根据不同的条件来呈现不同的内容,在本文中,我们将探讨React如何进行条件渲染,需要的朋友可以参考下
    2023-11-11
  • React.js前端导出Excel的方式

    React.js前端导出Excel的方式

    这篇文章主要为大家介绍了React.js前端导出Excel的方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 在React框架中实现一些AngularJS中ng指令的例子

    在React框架中实现一些AngularJS中ng指令的例子

    这篇文章主要介绍了在JavaScript的React框架中实现一些AngularJS指令的例子,React使用Virtual DOM因而与普通的js框架有些不同,需要的朋友可以参考下
    2016-03-03
  • 如何创建自己的第一个React 页面

    如何创建自己的第一个React 页面

    React是用于构建用户界面的JavaScript库,本文主要介绍了如何创建自己的第一个React页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • react-redux多个组件数据共享的方法

    react-redux多个组件数据共享的方法

    这篇文章主要介绍了react-redux多个组件数据共享的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • React使用ref方法与场景介绍

    React使用ref方法与场景介绍

    这篇文章主要介绍了React使用ref方法与场景,React支持给任意组件添加特殊属性。ref属性接受一个回调函数,它在组件被加载或卸载时会立即执行
    2022-10-10

最新评论