---
title: Drag and drop events
author: Niall Kader
published: 2/15/2025
description: Drag and drop event listener examples
---
You can make use of the following events in JavaScript to allow you to drag and drop elements
in a web page:
1. **dragstart**
1. **dragover**
1. **drop**
There are quite a few other 'drag' events, but for this example we just need these three.
Here are the articles I found that helped me figure out how to get a working code sample up and running:
1. https://jenkov.com/tutorials/html5/drag-and-drop.html
1. https://www.w3schools.com/HTML/html5_draganddrop.asp
1. https://www.digitalocean.com/community/tutorials/js-drag-and-drop-vanilla-js
Here's the starter code (create a file named **drag-and-drop-events.html** and paste this code into it):
```html
Drag and Drop Events
```
Here are some things you need to know about this code:
1. When we're done, you'll be able to drag **div1**, and drop it into **div2**
1. To make an element draggable, you need to set it's **draggable** attribute to true.
So, you'll see that this attribute has been added to **div1**.
Now let's add some JavaScript (inside the event handler function for the window load event).
First, get a handle on each div:
```js
const dragableDiv = document.querySelector("#div1")
const dropDiv = document.querySelector("#div2");
```
Next add this code:
```js
dragableDiv.addEventListener('dragstart', (evt)=>{
event.currentTarget.style.backgroundColor = 'yellow';
})
```
This code simply changes the background color of **div1** when you start to drag it.
Now add this code, which will append **div1** to **div2** when **div1** is dropped on **div2**.
(we'll be talking about the **appendChild()** method soon in this class)
```js
dropDiv.addEventListener('drop', (evt)=>{
dropDiv.appendChild(dragableDiv);
})
```
Things won't quite work just yet! For some reason, if you want an element to allow other elements to be dropped on it,
then you have to prevent the default behavior of the **dragover** event. Apparently the default
behavior is to not allow things to be dragged over an element.
So we need to add this code:
```js
// by default, elements don't allow other elements to be dragged over them,
// so we need to prevent this
dropDiv.addEventListener('dragover', (evt)=>{
evt.preventDefault();
});
```
Now, if you run the code, you should be able to drag **div1** and drop it into **div2**!