Components: cdkDragPreview without parent cdkDropList

Created on 22 Mar 2019  路  2Comments  路  Source: angular/components

*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?

P3 cddrag-drop

Most helpful comment

@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>

All 2 comments

@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.

@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>
Was this page helpful?
0 / 5 - 0 ratings

Related issues

theunreal picture theunreal  路  3Comments

julianobrasil picture julianobrasil  路  3Comments

Miiekeee picture Miiekeee  路  3Comments

LoganDupont picture LoganDupont  路  3Comments

savaryt picture savaryt  路  3Comments