Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(cdkDrag): Specify drag clone location #20536

Closed
geometricpanda opened this issue Sep 10, 2020 · 3 comments
Closed

feat(cdkDrag): Specify drag clone location #20536

geometricpanda opened this issue Sep 10, 2020 · 3 comments
Labels
area: cdk/drag-drop feature This issue represents a new feature or feature request rather than a bug or bug fix

Comments

@geometricpanda
Copy link

geometricpanda commented Sep 10, 2020 •
edited
Loading

Feature Description

When dragging an element using cdkDrag, a clone is appended to body see here

Whilst end of body is a sensible default location, it'd be great if this were configurable to a DOM Element or ElementRef.

Use Case

We have an Angular component library which is built against a "global" CSS package.

Each selector in the global CSS package is selector scoped against a data attribute describing which brand is belongs to, such as [data-theme="blue"] .button

This enables a single microfrontend to be easily theme switched based on user / channel context.
Our <body> looks something akin to:

...
<body>

    <div data-theme="blue">
        <app-one-root>
            <button class="button">Button</button>
        </app-one-root>
    <div>

    <div data-theme="red">
        <app-two-root>
            <button class="button">Button</button>
        </app-two-root>
    <div>

</body>
...

When using the Drag and Drop module, the clone is created outside either of the scoped themes so therefore the clone is unstyled so you get something like this:

...
<body>

    <div data-theme="blue">
        <app-one-root>
            <button class="button">Button</button>
        </app-one-root>
    <div>

    <div data-theme="red">
        <app-two-root>
            <button class="button">Button</button>
        </app-two-root>
    <div>

    <button class="button cdk-drag cdk-drag-dragging">Button</button> <--- Outside of CSS scope

</body>
...

Whilst this problem doesn't happen when using style encapsulated components, we're unable to achieve the desired multi-theming thanks to having to support IE11 and it's lack of support for custom properties.

The only solution I can think of is similar to the CDK Portal, being able to control where it embeds.
@geometricpanda geometricpanda added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Sep 10, 2020
@Achilles1515
Copy link

This issue is being tracked here:
#13288

@geometricpanda geometricpanda mentioned this issue Sep 10, 2020
Closed
@crisbeto
Copy link
Member

Closing as a duplicate of #13288.

@crisbeto crisbeto added area: cdk/drag-drop and removed needs triage This issue needs to be triaged by the team labels Sep 10, 2020
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 11, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: cdk/drag-drop feature This issue represents a new feature or feature request rather than a bug or bug fix
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(cdk/drag-drop): custom drag clone target
3 participants
@geometricpanda @crisbeto @Achilles1515