JavaScript Events Handlers — ondragleave and ondragover
Tags: javascript, tutorial, beginners, webdev
Published: 2020-01-31 02:26:51

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

In JavaScript, events are actions that happen in an app. They’re triggered by various things like inputs being entered, forms being submitted, and changes in an element like resizing, or errors that happen when an app is running, etc. We can assign an event handler to handle these events. Events that happen to DOM elements can be handled by assigning an event handler to properties of the DOM object for the corresponding events. In this article, we will look at the `ondragleave` and `ondragover` event handlers and how to use them.

ondragleave
===========

The `ondragleave` property of a DOM element let us set the an event handler function to handle the `dragleave` event. The `dragleave` event is fired when the dragged element or text selection leave a valid drop target. For example, we can check where the draggable box is moving away from by adding the following HTML code:

```html
<p id='drag-leave-tracker'>
</p>
<div id='drag-box' draggable="true">
</div>
<div id='drop-zones'>
  <div id='drop-zone'>
  </div>
<div id='drop-zone-2'>
  </div>
</div>
```

The code above is better than passing in `dragBox` directly into `appendChild` since it’s much more generic than the original version of the event handler function. We can attach it to any draggable object we want. For example, if we have more than one draggable `div` element like in the following HTML code:

```html
<div id='drag-box' draggable="true">
</div>
<div id='drag-box-2' draggable="true">
</div>
<div id='drop-zone'>
</div>
```

And we change the CSS to style both draggable `div` elements like in the code below:

```css
#drag-box {  
  width: 100px;  
  height: 100px;  
  background-color: red;  
}

#drag-box-2 {  
  width: 100px;  
  height: 100px;  
  background-color: green;  
}

#drop-zone {  
  width: 200px;  
  height: 200px;  
  background-color: purple  
}
```

Then we can write the following JavaScript code to use one `ondragleave` event handler function to handle the dropping of both draggable `div` elements like we have in the code below:

```javascript
const dragBox = document.getElementById('drag-box');
const dropZone = document.getElementById('drop-zone');
const dropZone2 = document.getElementById('drop-zone-2');
const dragLeaveTracker = document.getElementById('drag-leave-tracker');
const dragEnterHandler = (e) => {
  if (e.toElement.id.includes('drop-zone')) {
    e.toElement.appendChild(document.getElementById('drag-box'));
  }
}
const dragLeaveHandler = (e) => {
  if (e.toElement.id.includes('drop-zone')) {
    dragLeaveTracker.innerHTML = `Leaving ${e.target.id}`;
  }
}
dropZone.ondragenter = dragEnterHandler;
dropZone.ondragleave = dragLeaveHandler;
dropZone2.ondragenter = dragEnterHandler;
dropZone2.ondragleave = dragLeaveHandler;
```

In the code above, we created a `dragLeaveHandler` function, which has an `e` parameter with the `DragEvent` object to get the DOM element that the draggable element is moving away from. It can also move away from itself since it’s also a valid drop target. We only care about moving away from the 2 `drop-zone` `div` elements so we added a check if the ID of the element that it’s moving away from with the `e.toElement.id.includes(‘drop-zone’)` line. Then we set the `innerHTML` property of the `dragLeaveTracker` DOM element to display which one the 2 `div` elements the `drag-box` `div` is moving away from.

Also, we have the `dragEnterHandler` to handle the actual dropping of the `drag-box` element into the `drop-zone` `div` element by using the `appendChild` method to append the `drag-box` inside the `drop-zone` `div` .


ondragover
==========

We can assign an event handler to the `ondragover` property of a DOM element to handle the `dragover` event, which is triggered when an element or text selection is being dragged over a valid drop target every few hundred milliseconds. For example, we can add the following HTML code to add a `p` element for displaying the ID of the element that the draggable element is dropped into, a draggable `div` element and 2 `div` elements that we can drop the draggable `div` element into, by writing the following code:

```html
<p id='drag-over-tracker'>
</p>
<div id='drag-box' draggable="true">
</div>
<div id='drop-zones'>
  <div id='drop-zone'>
  </div>
<div id='drop-zone-2'>
  </div>
</div>
```

Then we style the elements we have in the HTML code by changing the color and the size of each div with the following CSS code:

```css
#drag-box {  
  width: 100px;  
  height: 100px;  
  background-color: red;  
}

#drop-zones {  
  display: flex;  
}

#drop-zone {  
  width: 200px;  
  height: 200px;  
  background-color: purple  
}

#drop-zone-2 {  
  width: 200px;  
  height: 200px;  
  background-color: green;  
}
```

We put the 2 `div` elements that we can drop our draggable `div` into side by side by using the `display: flex` property and value. Then we can assign our own event handler function to the `ondragover` property of our 2 `div` elements where we can drop our draggable `div` element into by writing the following code:

```javascript
const dragBox = document.getElementById('drag-box');
const dropZone = document.getElementById('drop-zone');
const dropZone2 = document.getElementById('drop-zone-2');
const dragOverTracker = document.getElementById('drag-over-tracker');
const dragEnterHandler = (e) => {
  if (e.toElement.id.includes('drop-zone')) {
    e.toElement.appendChild(document.getElementById('drag-box'));
  }
}
const dragOverHandler = (e) => {
  console.log(e);
  if (e.toElement.id.includes('drop-zone')) {
    dragOverTracker.innerHTML = `Dragging over  ${e.target.id}, coordinate (${e.clientX}, ${e.clientY})`;
  }
}
dropZone.ondragenter = dragEnterHandler;
dropZone.ondragover = dragOverHandler;
dropZone2.ondragenter = dragEnterHandler;
dropZone2.ondragover = dragOverHandler;
```

In the code above, we have the `dragOverHandler` function to handle the `dragover` event for the `drop-zone` and `drop-zone-2` `div` elements. When the `drag-box` `div` element is dragged over one of the `drop-zone` `div` elements, we can see that the `console.log` statement inside the `dragOverHandler` function outputs data multiple times if we keep the `drag-box` `div` over either of the `drop-zone` `divs` . This is because the `dragover` event is fired every few milliseconds when we drag a draggable element over a valid drop target, which are the 2 `drop-zone` `div` elements. As long as we drag it over either of the 2 `div` elements, we will see new output from the `console.log` . Also, as we move `drag-box` inside either of the 2 `drop-zone` `div` elements, the coordinate that the `drag-box` within the screen will also be updated as it’s being moved by the mouse or touchscreen. We will see the ID of the `div` element that the `drag-box` is dragged over by getting the value of the `e.toElement.id` property and we also get the ID the `drag-box` is dragging over from the `e` parameter. The `e` parameter is an `DragEvent` object, which has properties like the drag coordinates with the `clientX` and `clientY` properties and the element being dragged over with the `toElement` property.

Also, we have the `dragEnterHandler` to handle the actual dropping of the `drag-box` element into the `drop-zone` `div` element by using the `appendChild` method to append the `drag-box` inside the `drop-zone` `div` .

The `ondragleave` property of a DOM element let us set the an event handler function to handle the `dragleave` event. The `dragleave` event is fired when the dragged element or text selection leave a valid drop target. It’s handy for getting which drop target element the element being dragged is leaving. We can assign an event handler to the `ondragover` property of a DOM element to handle the `dragover` event, which is triggered when an element or text selection is being dragged over a valid drop target every few hundred milliseconds. It’s handy for identifying which element we’re dragging over as well as getting the coordinates on the screen that the element being dragged is in.