drop

16 March, 2023

Contributors

Milsaware

@milsaware

About

The drop event is triggered when a draggable element is dropped onto a drop target. The event is commonly used in conjunction with the dragstart and dragover events to implement drag and drop functionality in applications.

When a drop event occurs, the browser fires the event on the element that was the drop target. You can attach an event listener to the drop target to handle the drop event and perform some action when the element is dropped onto it.

The drop event provides access to the data being dropped, which can be files or other types of data. You can access the dropped data using the dataTransfer property of the event object.

Event listener

Here's an example of how to add an event listener for the drop event:

HTML

<div class="drop-target">Drop files here!</div>

JavaScript

const dropTarget = document.querySelector('.drop-target');

dropTarget.addEventListener('drop', (event) => {
    event.preventDefault();

// Handle dropped files or data here
console.log('File(s) dropped!');
    });

dropTarget.addEventListener('dragover', (event) => {
    event.preventDefault();
});

Here, we have a div element with the class drop-target that serves as our drop target. We've added two event listeners to the element using the addEventListener method.

The first event listener listens for the drop event and calls a function that handles the dropped files or data. The function prevents the default behaviour of the browser by calling event.preventDefault().

The second event listener listens for the dragover event and prevents the default behaviour of the browser to allow a drop. This is necessary to allow the drop event to fire on the element.

Property

Here's an example of using the ondrop property to listen for the drop event:

// JavaScript code
const dropzone = document.getElementById('dropzone');

dropzone.ondrop = function(event) {
    event.preventDefault();
    const files = event.dataTransfer.files;
    console.log('Dropped files:', files);
};

Here, we first get a reference to the HTML element with the ID "dropzone" using document.getElementById(). Then we assign a function to the ondrop property of the dropzone element.

The assigned function is called whenever a drop event occurs on the dropzone element. We use event.preventDefault() to prevent the default behaviour of the browser, which is to open the dropped file(s) in a new tab or window. Then we get the dropped file(s) from the event.dataTransfer.files property and log them to the console.

Inline

You can also use the drop event inline in your HTML code using the ondrop attribute. Here's an example:

HTML

<div class="drop-target" ondrop="dropHandler(event);" ondragover="event.preventDefault();">
    Drop files here!
</div>

JavaScript

function dropHandler(event) {
    event.preventDefault();

    // Handle dropped files or data here
    console.log('File(s) dropped!');
}

Here, we've added the ondrop attribute to the div element with the class drop-target. The attribute is set to a function called dropHandler that will handle the dropped files or data.

The ondragover attribute is also added to the element to prevent the default behaviour of the browser to allow a drop.

Note that using inline event handlers can make your HTML code harder to read and maintain. It's generally recommended to use addEventListener to attach event listeners instead.

Programmatic trigger

There is no drop() method in JavaScript. The drop event is fired when a draggable element is dropped onto a valid drop target. However, you can trigger the drop event programmatically using the dispatchEvent method:

const dropTarget = document.querySelector('.drop-target');
const dataTransfer = new DataTransfer();

// Add some data to the data transfer object
dataTransfer.setData('text/plain', 'Hello, world!');

// Create a new drop event
const dropEvent = new DragEvent('drop', {
    dataTransfer: dataTransfer
});

// Trigger the drop event on the drop target
dropTarget.dispatchEvent(dropEvent);

Here, we're creating a new DataTransfer object and adding some data to it using the setData method. We're then creating a new DragEvent object with the type drop and passing in the dataTransfer object as an option.

Finally, we're triggering the drop event on the dropTarget element using the dispatchEvent method and passing in the dropEvent object as an argument.

Note that triggering the drop event programmatically in this way will not work unless you also trigger the dragstart and dragover events first. This is because the browser needs to know that an element is being dragged and that it's being dragged over a valid drop target before it will allow a drop to occur.

javascript

draganddrop