dragover
16 March, 2023
0
0
0
Contributors
About
The dragover event is an HTML5 event that is fired repeatedly as a dragged item is moved over a drop target. This event is commonly used in conjunction with the dragenter and dragleave events to implement drag-and-drop functionality.
The dragover event is fired on the element that the dragged item is being dragged over. This event allows you to check if the dragged item can be dropped on the current location by calling the event.preventDefault() method and updating the cursor style using event.dataTransfer.dropEffect.
Event Listener
Here's an example of how you can use the dragover event to handle drag-and-drop functionality:
HTML
<div id="drop-zone" class="drop-zone">Drop Here</div>JavaScript
const dropZone = document.getElementById("drop-zone");
dropZone.addEventListener("dragover", function(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "copy";
dropZone.classList.add("drag-over");
});
dropZone.addEventListener("dragleave", function(event) {
event.preventDefault();
dropZone.classList.remove("drag-over");
});
dropZone.addEventListener("drop", function(event) {
event.preventDefault();
const file = event.dataTransfer.files[0];
console.log("Dropped file: " + file.name);
dropZone.classList.remove("drag-over");
});Here, we define an event listener for the dragover event on the drop-zone element. We prevent the default behaviour of the event using event.preventDefault(), which allows us to handle the drag-and-drop operation manually. We also set the event.dataTransfer.dropEffect property to "copy" to indicate that the dragged item can be copied to the current location.
Note that the dragover event can be fired very frequently while the user is dragging an item, so you should be careful not to perform any expensive operations in your event handler.
Property
Here's an example of how to use the ondragover property to assign a function to the dragover event of an HTML element:
CSS
.drop-target {
border: 2px solid black;
padding: 20px;
margin: 20px;
}
.draggable {
border: 2px solid black;
padding: 20px;
margin: 20px;
}HTML
<div id="drop-target" class="drop-target">
Drop Here
</div>
<div id="draggable" draggable="true" class="draggable">
Drag Me
</div>JavaScript
const dropTarget = document.getElementById('drop-target');
dropTarget.ondragenter = function(e) {
this.classList.add('highlight');
}
dropTarget.ondragover = function(e) {
e.preventDefault();
}
dropTarget.ondragleave = function(e) {
this.classList.remove('highlight');
}Here, we have a drop target and a draggable element. When the user drags the draggable element over the drop target, the ondragenter function is called and sets the background colour of the drop target to light-grey. The ondragover function is used to prevent the default behaviour of the browser, which is to disallow dropping. When the user drags the draggable element away from the drop target, the ondragleave function is called and removes the background colour from the drop target. This provides visual feedback to the user that they have left the drop target and the item will not be dropped there.
Inline
The dragover event can also be used inline with HTML using ondragover. Here's an example:
HTML
<div ondragover="handleDragOver(event)">Drop files here</div>JavaScript
function handleDragOver(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "copy";
// Do something else
}Here, we define the dragover event handler inline with the HTML using the ondragover attribute. The event handler is a JavaScript function called handleDragOver, which accepts the event object as an argument.
Inside the handleDragOver function, we prevent the default behaviour of the event using event.preventDefault(). We also set the event.dataTransfer.dropEffect property to "copy" to indicate that the dragged item can be copied to the current location. Finally, we can perform any other necessary operations based on the state of the event.
Note that using inline event handlers can make your code harder to read and maintain, especially if you have a lot of them. It's generally considered better practice to separate your JavaScript code from your HTML code by using event listeners.
Programmatic trigger
To dispatch a dragover event programmatically, you can create a new DragEvent object with the dragover event type, set any relevant event properties on the object, and then dispatch the event on the target element using the dispatchEvent method.
Here's an example:
const targetElement = document.getElementById("myTarget");
const dragOverEvent = new DragEvent("dragover", {
bubbles: true,
cancelable: true,
});
targetElement.dispatchEvent(dragOverEvent);This code creates a DragEvent object with the dragover event type, sets the bubbles and cancelable properties to true, and then dispatches the event on the targetElement.
It's worth noting that dispatching events programmatically can have implications for the security and reliability of your application, so use this technique with caution.
javascript
draganddrop