React 实现拖拽

最新推荐文章于 2024-06-14 10:46:49 发布

航小码

最新推荐文章于 2024-06-14 10:46:49 发布

阅读量1.7k

点赞数 1

分类专栏： React 文章标签： react.js

本文链接：https://blog.csdn.net/html5_mylove/article/details/121565736

版权

本文介绍了如何在React应用中实现拖拽功能，包括antd库中拖拽标题的添加，以及使用react-drag-listview库来实现Table表头的拖拽排序。

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

拖拽标题及拖拽表头
在这里插入图片描述
antd拖拽标题实现添加功能：

import React, {
    PureComponent } from 'react';
import {
    Tag, Input, Tooltip, Icon, Card } from 'antd';
import styles from './index.less';

export default class TopTags extends PureComponent {
   
  state = {
   
    tags: ['活动名称', '活动项2', '活动项目3', '项目4'],
    tagsTarget: [],
    tragName: '',
  };

  handleClose = removedTag => {
   
    const tagsTarget = this.state.tagsTarget.filter(tag => tag !== removedTag);
    // console.log(tags);
    this.setState({
    tagsTarget });
  };

  //拖拽开始
  tragStart = (e, item) => {
   
    // console.log("拖拽开始 e,item ", e, item);
    e.dataTransfer.setData('item', JSON.stringify(item)); // 拖拽元素携带的数据
    this.setState({
    tragName: item });
  };
  // 拖拽元素经过放置元素时
  dragOver = e => {
   
    e.preventDefault(); // 此处的代码是必须的  不然无法拖拽
    console.log('拖拽中');
  };

  // 拖拽元素放到放置元素时
  drop = e => {
   
    e.preventDefault();
    // 放置之后的后续操作
    // console.log("后续操作 e", e);
    const {
    tagsTarget, tragName } = this.state;
    if (tagsTarget.length < 3 && !tagsTarget.includes(tragName))
      this.setState({
    tagsTarget: tagsTarget.concat(tragName) });
  };

  render() {
   
    const {
    tags, tagsTarget } =