React +TS实现拖拽列表

wuKong95

已于 2022-11-22 18:17:02 修改

阅读量609

点赞数 2

分类专栏：前端 React h5 文章标签： react.js javascript 前端 typescript

于 2022-11-22 18:11:55 首次发布

本文链接：https://blog.csdn.net/weixin_45440288/article/details/127987540

版权

最近使用React写的拖拽组件，分享给大家，直接上代码。

摘要由CSDN通过智能技术生成

使用React+TS编写逻辑代码，less编写样式代码，不依赖第三方库，开箱即用，

最近写的拖拽组件，分享给大家，直接上代码

首先看看如何使用

自己定义的组件需要包裹在DragList.Item组件中

import DragList from './DragList';


 <DragList
      listPlus={[{ label: '标题' }]}
      listDataChange={(info: any) => {
        console.log(info)
      }}
    >
      <DragList.Item>111</DragList.Item>
      <DragList.Item>222</DragList.Item>
      <DragList.Item>333</DragList.Item>
      <DragList.Item>444</DragList.Item>
      <DragList.Item>555</DragList.Item>
    </DragList>

组件展示

拖拽组件.gif

TS 部分

import React, { useState, useEffect, useRef, useMemo, useLayoutEffect } from "react";
import styles from "./index.module.less"
export interface listDataChangeType {
    originIndex: number,// 移动前的索引 或 点击删除的索引 或者新增的组件的索引
    targetIndex?: number,// 移动后的目标索引
    type: 'move' // 操作的类型
}
interface DragListProps {
    listDataChange: (changeInfo: listDataChangeType) => void //数据变化
    children: React.ReactNode
}
enum MoveDownAndUp {
    down = 1,
    up = -1
}
const DragItem: React.FC<{children:React.ReactNode}> = ({ children }) => {
    useLayoutEffect(() => {
        let dragItem = Array.from(document.querySelectorAll('div[data-drag-warper]'))
        // 最大值
        let maxHeight = Math.max.apply(Math, dragItem.map(item => { return item['clientHeight'] }))
        dragItem.forEach((item: any) => {
            item.style.setProperty('--drag-offest-height', `