Expose `[data-drag-preview]` on dragged preview div

[vezaynk]

Provide a general summary of the feature here

I would like to implement a UX where the dragged item a GridList is slightly tilted, but all other styles remain, like so:

🤔 Expected Behavior?

😯 Current Behavior

Currently, there is no way to add purely additive styles. The only way to customize the appearance of the drag preview is by providing your own renderDragPreview.

The downside of this, is that relative styles are lost. For example, restoring the width of the div is difficult if its based on the size of its container.

💁 Possible Solution

Add a data-drag-preview attribute on the default drag preview, so that additional styles could be added to it easily.

🔦 Context

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

This would be nice, but the default drag preview is provided by the browser, so I don't think there's a way to achieve this.

[vezaynk]

@reidbarber I see. Does this also mean that I can't do UIs where I make the element being dragged hidden within the list (so that its only visible in the page once)?

At least, unless if I implement my own preview.

[reidbarber]

So you'd like to hide the element (in the list) while it's being dragged? There should be a data-dragging attribute and isDragging render prop on the item while it's being dragged, so you could hide it based on that condition.

[vezaynk]

@reidbarber The challenge is that the snapshot taken by the browser also becomes invisible if I apply hidden styling to it. Either both are visible, or both are invisible is how it seems to play out.

[reidbarber]

I guess we could potentially add a data attribute to the preview wrapper here:

react-spectrum/packages/@react-aria/dnd/src/DragPreview.tsx

Lines 58 to 60 in 66d65a9

	<div style={{zIndex: -100, position: 'absolute', top: 0, left: -100000}} ref={domRef}>
	{children}
	</div>

Then you could use that to differentiate the preview from the original item.

EDIT: This won't affect the browser's default preview, so I guess that won't work either.