直播平台软件开发，React onDrop拖拽事件

直播平台软件开发，React onDrop拖拽事件

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

 

拖拽节点

 

1

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

​

目标节点

 

1

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

 

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