目錄

• 1.文件1
• 2.文件2
• 3.使用

使用react-sortable-hoc實現(xiàn)拖拽

如圖：

提示：下面案例可供參考

1.文件1

代碼如下（示例）：文件名稱：./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;    // 拖拽時原列表替換    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ù)組    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;

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>控件標(biāo)簽顯示名稱<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}/>

到此這篇關(guān)于react拖拽組件react-sortable-hoc的使用的文章就介紹到這了,更多相關(guān)react拖拽組件react-sortable-hoc內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！