react拖动组件代码解说

这篇文章主要介绍“react拖动组件代码详解”，有一些人在react拖动组件代码详解的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

提示：下面案例可供参考

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拖动组件代码详解内容，小编将为大家输出更多高质量的实用文章！

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!