React onDrop拖拽事件

最新推荐文章于 2025-07-18 11:21:03 发布

原创最新推荐文章于 2025-07-18 11:21:03 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

React 专栏收录该内容

1 篇文章

订阅专栏

本文讲解如何在React中实现拖拽节点时的数据传递，并关注于目标节点的边框闪动效果。通过`onDragStart`和`onDragEnd`事件处理`drag`行为，`onDrop`事件捕获并处理数据。

React onDrop拖拽事件

拖拽节点时传递数据，拖拽事件触发时目标节点为边框闪动样式

拖拽节点

<div
	id={'ChartListItem' + deepItem.selectId}
    className="ChartList-item"
    key={'ChartListItem' + deepItem.selectId}
    draggable="true"
    onDragStart={(e) => {
    	const data = deepItem.selectId
        e.dataTransfer.setData('text', data)
        const button: any = document.querySelector('.diagramDelete')
        button.setAttribute('class', 'diagramDelete diagramTop-item diagramTop-item-click')
	}}
    onDragEnd={() => {
    	const button: any = document.querySelector('.diagramDelete')
        button.setAttribute('class', 'diagramDelete diagramTop-item')
    }}
 >
 </div>

目标节点

onDrop = (e: React.DragEvent<HTMLDivElement>): void => {
    const data: string = e.dataTransfer.getData('text')
    this.props.deleteSelect(data)
    const button: any = document.querySelector('.diagramDelete')
    button.setAttribute('class', 'diagramDelete diagramTop-item')
    e.stopPropagation()
  }
render(): JSX.Element {
    return (
      <div
        className="diagramDelete diagramTop-item"
        onDragOver={(event) => {
          event.preventDefault()
        }}
        onDrop={(e) => {
          this.onDrop(e)
        }}
      >
        <DeleteOutlined className="diagramAdd-icon diagramTop-item-icon" />
        <div className="diagramAdd-text diagramTop-item-text">删除图表</div>
      </div>
    )
}