[csswg-drafts] Proposal for ::drag-image to style the after-image of dragged elements (#13198)

sunkanmii has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal for ::drag-image to style the after-image of dragged elements ==
Following the proposal set in #11584, I suggest we also have a pseudo-selector called `::drag-image`. 

An example of what I mean is the little style you see in this demo when the nav element is dragged:

https://codepen.io/sunkanmii-the-styleful/pen/xbZLJvY

Hear me out, please. Instead of having JavaScript insert the styling for us or use CSS hacks, why can't we just have a pseudo-selector dedicated to just styling that dragged after-image?
i.e Instead of doing this with JS and the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API):

```js
menuBar.addEventListener("dragstart", (event) => {
  const dragPreview = document.createElement("div");
  dragPreview.textContent = "📦 Dragging...";
  dragPreview.style.cssText = `
    padding: 0.5rem 1rem;
    background: #fff6d6;
    color: #333;
    border: 2px dashed orange;
    border-radius: 0.5rem;
  `;

  document.body.appendChild(dragPreview);
...
```
I can simply just write this in CSS to style that after image:

```css
::drag-image{
    content: ;
    padding: 0.5rem 1rem;
    background: #fff6d6;
    color: #333;
    border: 2px dashed orange;
    border-radius: 0.5rem;
}
```

I'm open to suggestions on this, please. P.S it's my first issue on W3C, yay! (I think).


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13198 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 10 December 2025 00:03:09 UTC