Web Front-end
H5 Tutorial
What are the key events in the Drag and Drop API (dragstart, dragover, drop)?
What are the key events in the Drag and Drop API (dragstart, dragover, drop)?
Jun 27, 2025 am 01:02 AM
dragstart, dragover and drop are key events that implement drag and drop interactions. dragstart is triggered when the user starts to drag elements, and is used to set drag data and visual feedback; dragover is continuously triggered when dragging through the target area, and must call e.preventDefault() to allow placement and can be used to add highlighting; drop is triggered when releasing the mouse key, and is used to obtain data and execute corresponding logic, and the temporary style needs to be removed. In addition, to ensure that the element is draggable, the draggable property must be set to true.
When working with the Drag and Drop API in web development, there are several key events you need to understand in order to build smooth drag-and-drop interactions. The most important ones are dragstart , dragover , and drop . These events fire at different stages of the drag-and-drop process and each plays a specific role.
What happens during dragstart
This is the event that kicks everything off. It fires as soon as the user starts dragging an element — usually by clicking and holding the mouse button down on it.
- You typically set the data you want to transfer during this event using
setData(). - This is also where you can customize the drag image (optional), or change the opacity to give visual feedback.
- Make sure to only call
setData()when needed — no need to overdo it if you're not actually transferring any data.
Example:
element.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', 'Some data here');
}); A common mistake is forgetting to set the draggable attribute to true on the element you want to drag — otherwise, the browser won't recognize it as draggable.
How dragover affects dropping
The dragover event is fired continuously while an element is being dragged over a valid drop target. Without handling this event properly, the drop event won't fire at all.
- You must call
e.preventDefault()insidedragoverto allow the drop to happen. - Use this event to show visual cues like highlighting a drop zone.
- Avoid doing heavy computings here since it fires often.
For example:
dropZone.addEventListener('dragover', function(e) {
e.preventDefault(); // Required for drop to work
dropZone.classList.add('highlight');
}); Also, don't forget to clean up the visual effect elsewhere — maybe in dragleave or drop .
What happens during the drop event
This is the final step in the interaction — it fires when the user releases the mouse button over a valid drop target.
- Retrieve the dragged data using
getData()here. - Perform your logic: move the item, update the UI, send data to the server, etc.
- Don't forget to remove any temporary styles added during
dragover.
Basic usage:
dropZone.addEventListener('drop', function(e) {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
console.log('Dropped data:', data);
dropZone.classList.remove('highlight');
}); One thing people often miss is calling preventDefault() in both dragover and drop — skipping either will break the flow.
Basically that's it.
The above is the detailed content of What are the key events in the Drag and Drop API (dragstart, dragover, drop)?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
![Event ID 4660: Object deleted [Fix]](https://img.php.cn/upload/article/000/887/227/168834320512143.png?x-oss-process=image/resize,m_fill,h_207,w_330)
Event ID 4660: Object deleted [Fix]
Jul 03, 2023 am 08:13 AM
Some of our readers encountered event ID4660. They're often not sure what to do, so we explain it in this guide. Event ID 4660 is usually logged when an object is deleted, so we will also explore some practical ways to fix it on your computer. What is event ID4660? Event ID 4660 is related to objects in Active Directory and will be triggered by any of the following factors: Object Deletion – A security event with Event ID 4660 is logged whenever an object is deleted from Active Directory. Manual changes – Event ID 4660 may be generated when a user or administrator manually changes the permissions of an object. This can happen when changing permission settings, modifying access levels, or adding or removing people or groups
Get upcoming calendar events on your iPhone lock screen
Dec 01, 2023 pm 02:21 PM
On iPhones running iOS 16 or later, you can display upcoming calendar events directly on the lock screen. Read on to find out how it's done. Thanks to watch face complications, many Apple Watch users are used to being able to glance at their wrist to see the next upcoming calendar event. With the advent of iOS16 and lock screen widgets, you can view the same calendar event information directly on your iPhone without even unlocking the device. The Calendar Lock Screen widget comes in two flavors, allowing you to track the time of the next upcoming event, or use a larger widget that displays event names and their times. To start adding widgets, unlock your iPhone using Face ID or Touch ID, press and hold
What are the commonly used events in jquery
Jan 03, 2023 pm 06:13 PM
Commonly used events in jquery are: 1. Window events; 2. Mouse events, which are events generated when the user moves or clicks the mouse on the document, including mouse clicks, move-in events, move-out events, etc.; 3. Keyboard events, Events are generated every time the user presses or releases a key on the keyboard, including key press events, key release events, etc.; 4. Form events, such as the focus() event will be triggered when an element gains focus, and the focus() event will be triggered when it loses focus. The blur() event is triggered, and the submit() event is triggered when the form is submitted.
In JavaScript, what is the purpose of the 'oninput' event?
Aug 26, 2023 pm 03:17 PM
When a value is added to the input box, the oninput event occurs. You can try running the following code to understand how to implement oninput events in JavaScript - Example<!DOCTYPEhtml><html> <body> <p>Writebelow:</p> <inputtype="text"
How to build event-based applications using PHP
May 04, 2024 pm 02:24 PM
Methods for building event-based applications in PHP include using the EventSourceAPI to create an event source and using the EventSource object to listen for events on the client side. Send events using Server Sent Events (SSE) and listen for events on the client side using an XMLHttpRequest object. A practical example is to use EventSource to update inventory counts in real time in an e-commerce website. This is achieved on the server side by randomly changing the inventory and sending updates, and the client listens for inventory updates through EventSource and displays them in real time.
How to implement change event binding of select elements in jQuery
Feb 23, 2024 pm 01:12 PM
jQuery is a popular JavaScript library that can be used to simplify DOM manipulation, event handling, animation effects, etc. In web development, we often encounter situations where we need to change event binding on select elements. This article will introduce how to use jQuery to bind select element change events, and provide specific code examples. First, we need to create a dropdown menu with options using labels:
How to implement calendar functions and event reminders in PHP projects?
Nov 02, 2023 pm 12:48 PM
How to implement calendar functions and event reminders in PHP projects? Calendar functionality and event reminders are one of the common requirements when developing web applications. Whether it is personal schedule management, team collaboration, or online event scheduling, the calendar function can provide convenient time management and transaction arrangement. Implementing calendar functions and event reminders in PHP projects can be completed through the following steps. Database design First, you need to design a database table to store information about calendar events. A simple design could contain the following fields: id: unique to the event
A Deep Dive into Close Button Events in jQuery
Feb 24, 2024 pm 05:09 PM
In-depth understanding of the close button event in jQuery During the front-end development process, we often encounter situations where we need to implement the close button function, such as closing pop-up windows, closing prompt boxes, etc. When using jQuery, a popular JavaScript library, it becomes extremely simple and convenient to implement the close button event. This article will delve into how to use jQuery to implement close button events, and provide specific code examples to help readers better understand and master this technology. First, we need to understand how to define
