您好,登錄后才能下訂單哦!
這篇“react拖拽組件react-sortable-hoc如何使用”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來(lái)看看這篇“react拖拽組件react-sortable-hoc如何使用”文章吧。
使用react-sortable-hoc實(shí)現(xiàn)拖拽
如圖:
提示:下面案例可供參考
代碼如下(示例):文件名稱(chēng):./dragcomponents
import * as React from 'react' import { sortableContainer, sortableElement, sortableHandle, } from "react-sortable-hoc"; // 拖拽的關(guān)鍵組件 const Sortable: React.FC<any> = (props) => { const { dataSource = [], ComSortItem, sortEnd } = props; // 拖拽時(shí)原列表替換 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); } } // 拖拽時(shí)返回新數(shù)組 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); } // 數(shù)據(jù)更新 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} /> ); }); // 拖拽后回調(diào) 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;
代碼如下(示例):文件名稱(chēng)’./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>控件標(biāo)簽顯示名稱(chēng)<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
代碼如下(示例):
import Usedrag from './usedrag'; <Usedrag renderData={renderData}/>
以上就是關(guān)于“react拖拽組件react-sortable-hoc如何使用”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。