直播平台软件开发，React 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>
    )
}

 

 以上就是 直播平台软件开发，React onDrop拖拽事件，更多内容欢迎关注之后的文章