目錄

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

使用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內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！