### What is Drag and Drop?

Drag and drop is a event to handle user mouse action. Drag any thing into an area (e.g. `<div>`) will fire appropriate events.

There are 4 events you have to handle:

1. dragenter
2. dragleave
3. dragover
4. drop

### Event:  dragenter

This event will file when user drag anythings into the target area. Only fire when entering the DOMElement.

### Event:  dragleave

This event will file when user drag anythings out the target area. Only fire once when leaving the DOMElement.

### Event:  dragover

This event will file when user drag anythings onto the target area. Event will keep firing when mouse dragged something and moving over the target area.

### Event:  drop

This event will file when user drop anythings into the target area. Only fire once when dragging items dropped into the DOMElement.

### Add event listener to DOMElement

The following code shows how to add event listeners to those events:

```js
var div = document.getElementById('my-div');

div.addEventListener('dragenter', evt => {
	// do something
});

div.addEventListener('dragleave', evt => {
	// do something
});

div.addEventListener('dragover', evt => {
	// do something
});

div.addEventListener('drop', evt => {
	// do something
});
```

The above sample is for standard javascript with jquery.

### Do in React way

In react, you may use `ref` to accomplish this.

```js
class YourDragAndDropComponent extends Component {

	dropRef = React.createRef();
	
	constructor(props) {
		
		super(props);
		
		this.state = {};

		this.onDragEnter = this.onDragEnter.bind(this);
		
		this.onDragLeave = this.onDragLeave.bind(this);
		
		this.onDragOver = this.onDragOver.bind(this);
		
		this.onDrop = this.onDrop.bind(this);
	}
	
	componentDidMount() {

		const div = this.dropRef.current;

		div.addEventListener('dragenter', this.onDragEnter);

		div.addEventListener('dragleave', this.onDragLeave);

		div.addEventListener('dragover', this.onDragOver);

		div.addEventListener('drop', this.onDrop);
	}

	componentWillUnmount() {

		const div = this.dropRef.current;

		div.removeEventListener('dragenter', this.onDragEnter);

		div.removeEventListener('dragleave', this.onDragLeave);

		div.removeEventListener('dragover', this.onDragOver);

		div.removeEventListener('drop', this.onDrop);
	}

	onDragEnter(event) {
		// todo
	}

	onDragLeave(event) {
		// todo
	}

	onDragOver(event) {
		// todo
	}

	onDrop(event) {
		// todo
	}

	render() {
		
		return (
			
			

		);
	]
}
```