React onDrop drag event
Data is passed when dragging a node, and the target node is a border flashing style when the drag event is triggered
drag node
<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>
target node
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>
)
}