I know what you’re thinking. Yet another CSS pseudoclass… But I think this suggestion is pretty cool.
Earlier this year it was proposed to add a new pseudo-class, :dragwhich allows developers to apply styles when an element is actively dragged by the user. Currently, CSS lacks a mechanism to detect drag interactions, making it difficult to manage UI behavior that depends on this action without relying on JavaScript.
No JavaScript! I like the idea of having a pseudo-class dedicated to this function instead of by the classList.toggle() route.
But how would this work?
To understand it, you must first know that the Drag and drop HTML API. Some of the events it fires involve:
drag(fires every few milliseconds when the element is dragged),dragstart(event is triggered at the initial resistance), anddragend(event is fired when dragging the element stops).
Let’s take a quick look at how these drag-and-drop events work in JavaScript to understand how they would translate into CSS. Imagine we have seven button elements in a
We can make the entire .menu-bar draggable by pasting an attribute:
For our CSS we simply specify the is-drag class a style, which is only applied when the element is dragged or moved:
In CSS we can create a .is-dragging class that we will set on the element using JavaScript when it is dragged. These are the styles we apply to the element when that happens:
.is-dragging {
box-shadow: 0 4px 12px rgba(0 0 0 / 0.15);
background: #fff;
transform: translate(1px);
opacity: 0.2;
scale: 1.2;
}And here is the JavaScript to switch between the start of the mouse drag and the end of it. A is being listened to dragstar event and adds the .is-dragging class at the .menu-bar. And if we do the .menu-barthe lingering pleasure stops and the .is-dragging class has been removed:
menuBar.addEventListener("dragstart", (event) => {
event.target.classList.add("is-dragging");
});
menuBar.addEventListener("dragend", (event) => {
event.target.classList.remove("is-dragging");
});Our output would look something like this. Drag the dropdown element to see:
Not bad! When the menu bar is dragged, an image of itself remains in its original position, formatted with the .is-dragging class. And while we could completely disable this with JavaScript, how cool would it be to have that suggested :drag pseudo-class to abstract all that script-y stuff:
.menu-bar:drag {
cursor: grabbing;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background: #fff;
transform: translate(1px);
opacity: 0.2;
scale: 1.2;
}+1 for achievement! +1 for one less dependency! +1 for maintainability!
What about the sample image?
Did you know that we can style the actual element itself as it is dragged across the screen? That's called the sample image and we can replace it with one
It’s just a little more JavaScript using the dataTransfer.setDragImage() function:
const dragPreview = document.createElement("div");
dragPreview.textContent = "📦 Dragging...";
dragPreview.style.cssText = `
background: #fff6d6;
border: 2px dashed orange;
border-radius: 0.5rem;
color: #333;
padding: 0.5rem 1rem;
`;
document.body.appendChild(dragPreview);
// This replaces the default drag preview
event.dataTransfer.setDragImage(dragPreview, 0, 0);
// Remove after the event fires
setTimeout(() => dragPreview.remove(), 0);Here I go out and propose another CSS pseudo just for that ::drag-image. Imagine if you could bypass all that JavaScript and write the styles directly in CSS:
::drag-image {
content: "📦 Dragging...";
padding: 0.5rem 1rem;
background: #fff6d6;
color: #333;
border: 2px dashed orange;
border-radius: 0.5rem;
}I suppose it could be a pseudo-class instead, but it feels like a pseudo-element makes more sense since we're talking about a specific object rather than a state.
I have opened a topic for that - give a thumbs up if you find it useful to have one ::drag-image such a pseudo-element. The CSSWG is already discussed the :drag proposal. If that is baked into the specs then I would also push for the pseudo element.
Thoughts?
Yes or no for drag-related pseudos? Would you reach for something like that, or do you feel like too many steps on JavaScript's toes?
#Future #CSS #drag #draggedimage #CSS #tricks