angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.37k stars 6.75k forks source link

cdkDragPreview without parent cdkDropList #15576

Open alvaromartmart opened 5 years ago

alvaromartmart commented 5 years ago

*cdkDragPreview currently does not have any effect when attached to elements that are not inside a parent cdkDropList container.

What is the use-case or motivation for this proposal?

Example use case

<div id="dismissible-data" cdkDrag>
    Content to hide while dragging
    <i class="fa fa-trash" *cdkDragPreview></i>
</div>

Is there anything else we should know?

Airblader commented 5 years ago

@alvaromartmart The title says cdkDragPreview, but in the description you're talking about cdkDragPlaceholder.

To add to this, for me cdkDragPreview is particularly relevant. A major difference with and without cdkDropList right now is where the dragged element is attached. My usecase is a bit like Gmail: I have a list of items which I want to drag, but not to reorder within the list but to drag them to some "folder" outside the list.

Since the list itself has overflow:hidden (and this cannot sensibly be removed) this is right now impossible.

alvaromartmart commented 5 years ago

@Airblader you're right, thanks for pointing it out, I corrected the title... Interestingly the same issue seems to apply to both *cdkDragPreview and *cdkDragPlaceholder directives.

I've managed to solve it by wrapping the element inside a div with the cdkDropList directive, but it doesn't look too elegant in my opinion as it is not really a list.

<div cdkDropList>
    <div id="dismissible-data" cdkDrag>
        Content to hide while dragging
        <i class="fa fa-trash" *cdkDragPreview></i>
    </div>
</div>