- From: Sebastian Zartner via GitHub <sysbot+gh@w3.org>
- Date: Thu, 11 Feb 2021 19:55:20 +0000
- To: public-css-archive@w3.org
> > 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 > > Are the [drag events](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) not sufficient for these to adjust the necessary styles especially since you'll need to handle the dropping logic there too? The last time I tried it myself (about two or three years ago, I think) the drag events didn't provide a proper way to style the dragged element. They only allow to fully style the drop targets via the `target` property and the related CSSOM APIs. See the examples here: https://developer.mozilla.org/en-US/docs/Web/API/Document/dragend_event https://stackoverflow.com/questions/11169554/how-to-style-dragged-element https://www.kryogenix.org/code/browser/custom-drag-image.html https://flaviocopes.com/drag-and-drop/ There _is_ a [`DataTransfer.setDragImage()`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage) method, though it only allows to set an image instead of the element, though it doesn't allow to style that image, and especially no way to get rid of the transparency effect added by UAs. And this doesn't only apply to dragged elements, also dragging selected text shows a similar effect. > > dragging files from the file system into the UA, etc. > > This one intrigues me and isn't covered by the above API set (that I'm aware of). Wouldn't it make more sense to fill this gap in that API instead? That would then allow necessary styling assuming we ensure to spec that they should be styleable and how. I could then see a discussion around pseudo classes that map to said events and it would work beyond just images. I'm personally not a fan of having the above pseudo-element since it seems like it's primarily targeted at a single usecase and could possibly be filled via a different API that aligns with the same behavior. I wouldn't strongly oppose it though either. Yes, dragging files into the UA is a special case, as they come from outside the UA and their dragged image is generally controlled by the OS. I'm not sure to what extent UAs are allowed to influence the style of it. I'd say, the most important use cases are the ones that are UA internal, though, i.e. dragging DOM elements. Note that [Selectors Level 4 already had pseudo-classes related to drop events](https://www.w3.org/TR/2013/WD-selectors4-20130502/#drag-pseudos), which were dropped (pun intended 😄) in #2257. While I agree with you that there should be pseudo-classes related to those elements, this issue focuses specifically on the thing that is shown while dragging (and the pseudo-classes for drag source and drop targets be discussed separately). And as of now, this is currently an image, which defaults to a copy of the element being dragged but can be changed to some other image or be hidden. And the element that is dragged actually stays where it is. While I still think that styling this dragged copy could best be solved via a pseudo-element, there might be another approach by changing the APIs instead. I.e. there could be an option added to control whether you are only dragging a copy of the element or the actual element itself. _Then_ I'd definitely be for a pseudo-class like `:dragged` that allows to apply styles to the dragged element. Sebastian -- GitHub Notification of comment by SebastianZ Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1703#issuecomment-777750246 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 11 February 2021 19:55:22 UTC