卡片拖拽 onDrag事件

最新推荐文章于 2024-07-07 16:20:57 发布

阿婆家的小花花

最新推荐文章于 2024-07-07 16:20:57 发布

阅读量596

点赞数

分类专栏：卡片拖拽 onDrag事件文章标签： reactjs css

本文链接：https://blog.csdn.net/renxumei/article/details/108615865

版权

本文介绍了如何在ReactJS中实现卡片的拖拽功能，主要探讨了onDrag事件的使用和CSS样式在拖拽过程中的应用，帮助开发者创建更直观交互的用户界面。

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

// 拖拽开始时，将被拖卡片数据存放到state，并让被拖拽元素原本的位置显示被拖拽样式，
// 设置一个延迟，解决一触发拖拽就给该元素加上了绝对定位的蒙版，导致拖拽不动的问题
  onDragStart = (e, item) => {
    setTimeout(() => {
      this.setState({
        courseCard: item
      })
    }, 1000 * 0.05)
  }


  onDragEnd = () => {
    // 拖拽完成后的逻辑，如恢复被拖拽对象元素在原本位置的样式
  }


  onDragEnter = (e) => {
   // 处理拖拽对象元素进入目标位置内时需要做的逻辑
  }


  onDragOver = (e) => {
    e.preventDefault();
  }


  onDrop = (e) => {
    // 处理将拖拽对象元素放置到目标位置后的业务
  }

// 拖拽目标位置元素
<td
  onDragEnter={(e) => this.onDragEnter(e)}
  onDragOver={this.onDragOver}
  onDrop={(e) => this.onDrop(e)}
>
...
</td>

// 拖拽对象元素

// 被拖拽卡片id
const currCard = this.state.courseCard['schedulePlanClassId'] || ''

<div className={style['schedule-card-box']}>
<div className&