Skip to content

Instantly share code, notes, and snippets.

@Quadriphobs1

Quadriphobs1/DragDrop.jsx

Created February 5, 2019 17:22
Show Gist options
  • Save Quadriphobs1/c3f518e61d67a6f148c83c164dddca6c to your computer and use it in GitHub Desktop.
Save Quadriphobs1/c3f518e61d67a6f148c83c164dddca6c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Quadriphobs1 created this gist Feb 5, 2019.
    90 changes: 90 additions & 0 deletions DragDrop.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,90 @@
    import React, { Component } from 'react'
    class DragAndDrop extends Component {
    state = {
    drag: false
    }
    dropRef = React.createRef()
    handleDrag = (e) => {
    e.preventDefault()
    e.stopPropagation()
    }
    handleDragIn = (e) => {
    e.preventDefault()
    e.stopPropagation()
    this.dragCounter++
    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
    this.setState({drag: true})
    }
    }
    handleDragOut = (e) => {
    e.preventDefault()
    e.stopPropagation()
    this.dragCounter--
    if (this.dragCounter === 0) {
    this.setState({drag: false})
    }
    }
    handleDrop = (e) => {
    e.preventDefault()
    e.stopPropagation()
    this.setState({drag: false})
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
    this.props.handleDrop(e.dataTransfer.files)
    e.dataTransfer.clearData()
    this.dragCounter = 0
    }
    }
    componentDidMount() {
    let div = this.dropRef.current
    div.addEventListener('dragenter', this.handleDragIn)
    div.addEventListener('dragleave', this.handleDragOut)
    div.addEventListener('dragover', this.handleDrag)
    div.addEventListener('drop', this.handleDrop)
    }
    componentWillUnmount() {
    let div = this.dropRef.current
    div.removeEventListener('dragenter', this.handleDragIn)
    div.removeEventListener('dragleave', this.handleDragOut)
    div.removeEventListener('dragover', this.handleDrag)
    div.removeEventListener('drop', this.handleDrop)
    }
    render() {
    return (
    <div
    style={{display: 'inline-block', position: 'relative'}}
    ref={this.dropRef}
    >
    {this.state.dragging &&
    <div
    style={{
    border: 'dashed grey 4px',
    backgroundColor: 'rgba(255,255,255,.8)',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 9999
    }}
    >
    <div
    style={{
    position: 'absolute',
    top: '50%',
    right: 0,
    left: 0,
    textAlign: 'center',
    color: 'grey',
    fontSize: 36
    }}
    >
    <div>drop here :)</div>
    </div>
    </div>
    }
    {this.props.children}
    </div>
    )
    }
    }
    export default DragAndDrop