"Earlier this year, it was proposed to add a new pseudo-class, :drag, that would enable developers to apply styles when an element is being actively dragged by the user. Currently, CSS lacks a mechanism to detect drag interactions, making it difficult to manage UI behaviors that depend on this action without relying on JavaScript. No JavaScript! I like the idea of having a pseudo-class dedicated to this function rather than going through the classList.toggle() route."
"To understand, you first have to know that the HTML Drag and Drop API. Some of the events it fires include: drag (fires every few milliseconds when the element is dragged), dragstart (event fires at the initial drag), and dragend (event fires when the dragging the element stops). Let's take a quick look at how these drag-and-drop events work in JavaScript in order to understand how they would translate in CSS. Imagine we have seven button elements in a <div> :"
The :drag pseudo-class enables CSS to target elements while they are actively being dragged by the user. CSS currently lacks a native way to detect drag interactions, so developers commonly rely on JavaScript to toggle classes during drag events. The HTML Drag and Drop API emits dragstart, drag, and dragend events that mark when dragging begins, continues, and ends. Developers frequently add an .is-dragging class on dragstart and remove it on dragend to apply visual styles like shadows or opacity. :drag would allow those visual changes to be expressed purely in CSS, reducing JavaScript reliance.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]