Add ability to render native drag preview in context of specific element.

[olivercoad]

When generating the custom drag preview, the container is added directly to body. This means it inherits the CSS state of body, including CSS variables, font, currentColor etc.

I'd love the option to provide an alternative element to document.body to mount the container to, so that it can inherit the desired CSS state from the context of where the dragged element is.

The main reason I want this is so that it can get use the css variables from the theme, which aren't present on the body.

Because container is position: fixed, it will still render in the correct place.
Potential gotchas to look out for are when the element:

• is hidden or display: none
• has opacity
• has other things above it in the stacking context

Proposed change

export function setCustomNativeDragPreview({
	render,
	nativeSetDragImage,
	getOffset = defaultOffset,
        containerParent = document.body,
}: {
	getOffset?: GetOffsetFn;
	render: RenderFn;
	nativeSetDragImage: ElementEventPayloadMap['onGenerateDragPreview']['nativeSetDragImage'];
        containerParent?: HTMLElement;
}) {

/* ... */
        // document.body.append(container);
	containerParent.append(container);

/* cleanup */
            // document.body.removeChild(container);
            containerParent.removeChild(container);

[hungify]

It is already supported, so please take the time to explore the documentation, existing issues, and discussions before creating a new issue. There may be a solution: #121 (comment)

[olivercoad]

Thankyou for the suggestion but I don't believe you've understood this issue.

I've already read many similar discussions to that where you have pointed to that technique and I already have experience using non-native custom drag previews. Your example was very useful for helping learn how to use non-native drag previews with pragmatic drag and drop, and is probably the best solution for many use-cases because it gives the developer the most control. So thank you for putting it together. However, that is not what this issue is about.

It is about using the native drag preview. The preview does not need to change once it is generated, I just want to be able to have the right css context for generating it in the first place. I can put together a simple demo if you don't understand the use case or why it is important.

[over-over]

@olivercoad I found a workaround that could be useful to you. When calling setCustomNativeDragPreview, the library creates a special container and appends it to the document.body as you mentioned before. In addition, it removes this container from the document.body in a cleanup function that is called during onDragStart and onDrop.

Here's the source file

So what you can do is following:

1. Store somewhere your desired container with CSS variables or other styles, like const customContainer = document.querySelector("#some-id");
2. Create a variable to store render container from pragmatic let renderContainer = null;
3. Set your desired container as the parent of container from the render function;
4. Return container from the setCustomNativeDragPreview to the document.body during onDragStart, onDrop events.

And here is an example:

const customContainer = document.querySelector("#some-id");
let renderContainer = null;

draggable({
        element: yourElement,
        onGenerateDragPreview: ({ nativeSetDragImage, location }) => {
          setCustomNativeDragPreview({
            nativeSetDragImage,
            render: ({ container }) => {
              renderContainer = container;
              customContainer?.appendChild(renderContainer);
            },
          });
        },
        onDragStart() {
          if (renderContainer) {
            document.body.appendChild(renderContainer);
          }
        },
        onDrop() {
          if (renderContainer) {
            document.body.appendChild(renderContainer);
          }
        },
      })

This is hacky, but it works 🤷‍♂