Re: [csswg-drafts] [css-pseudo] Pseudo-element for dragged element (#1703)

Concrete use cases for this are dragging the cards from one column into another in a tasks board like Trello, reordering a list of items like the tabs in a browser or a priority or todo list, dragging files from the file system into the UA, etc.

For all those use cases you currently have to suppress the [default image provided by the UA for the dragging action](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#drageffects) and actually move the element itself or a temporary one. This is quite cumbersome and requires a lot of JavaScript code in order to track the mouse position and reposition the element.

I'd expect most such cases could be handled via the suggested pseudo-element. The pseudo-class @progers mentioned has some downsides, though, because the element is still forcibly made semi-transparent by the browser and cannot be changed and because you cannot choose to display some text or other content in it. Therefore I think the best solution would be a pseudo-element.

In order to get a copy of the element an example rule could look like this

```
::drag-image {
  content: element(#element); /* there might also be a keyword be added to element() that refers to the dragged element */
  display: block;
  width: 100px;
  height: auto;
}
```

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1703#issuecomment-776248528 using your GitHub account


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

Received on Tuesday, 9 February 2021 21:14:57 UTC