Keep a visual indication of where the cdkDrag element is when starting to drag

[Diemauerdk]

trafficstars

Please describe the feature you would like to request.

Whenever the user starts to drag an element it must be possible to have a visual indication of where in the list the element is being dragged from until it is dropped.

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

While dragging an element it is in many scenarios very important that you know where the element was originally placed because that information is currently lost when starting to drag.

This is important in all scenarios where the order of draggable elements is critical. If the order of the elements are critical and you start to drag an element and then lose the original position, then the user is forced to remember the position of the element or drop the element somewhere.

Is there anything else we should know?

[crisbeto]

This is possible already, you just have to style the .cdk-drag-placeholder. Here's an example.

[Diemauerdk]

Thanks for answering that fast.

Then I think you have misunderstood my question. At least I don't see the functionality in the example :)

In the example, you link to: When I start to drag an element then there is no placeholder of where it was placed. I can only see the placeholder of where it is going to be placed.

What I am looking for is a visual indication of where the element was placed and not going to be placed :)

[crisbeto]

Ah, I see. Reopening.

[zhaodong-wang]

This would be a very useful feature. In fact, if we look at Google Drive UI, this is what happened there. When you click a file, then start dragging it, there is a placeholder where the file was (but with <1 opacity), and there is another shrunk box "holding" this file.

I am currently trying to implement this functionality but it seems that currently with cdk-drag-drop this is still not easy?

[Diemauerdk]

@TeXnicians I have been trying to implement it too. My approach was making a copy of the item being dragged and inserting it at the index of the original item. I gave the copy a reduced opacity and when the dragged item was dropped I removed the copy element from the list. This simulated it but with a few problems.

The main problem was that the copied element behaved as it was not a part of the list when dragging. After "hacking" the CDK framework a lot, the conclusion I ended up with was that this needs to be handled within the angular CDK drag and drop in order to get the best experience.

I can see a lot of business scenarios where this feature is an essential requirement.

[zhaodong-wang]

@Diemauerdk I was trying to implement it in the other way around: I finally gave up using cdk framework but using the drag&drop of HTML5: listening to the events dragstart, drag, dragend, etc and add draggable to the element. So I can customize those animations (by creating DOM elements). I can pretty much reproduce the effects in Google Drive now.

[Pradins]

I was looking for the same feature in the current CDK, just realized its not. Any plans to get this implemented ?

[Pedrozxcv]

Can't you achieve what you want by putting transform: translate(0px, 0px) !important; on the class .cdk-drag?

[shyamal890]

+1

[ShakinFire]

+1

[sdrozdz]

+1

[fredpeaks]

I think this feature is essential as it could be useful for some business scenarios and solve some problems due to dimension changes when a user drag an item from one list to another that is below. If the origin list keeps a copy of the item, it's height won't change when the user drags the item over the underneath list. So the underneath list position won't change either preventing a sudden move of the list relatively to the mouse position which can lead to a buggy sensation.

As you can see in the gif above, the dragged element placeholder is not placed above the "6" when the dragged element enters in it because the second list move to the top.

When the dragged element is moved slower it leads to another weird behavior as you can see in the next gif.

Gifs based on : https://stackblitz.com/edit/angular-mbwtxv

[kamil-zielinski]

+1

[rxseb]

+1

[angelinabylitskaya]

+1

[liesahead]

Is there an approximate estimation of when it's going to be implemented? Because this is kind of essential feature of DnD. If anyone is interested, the workaround that looks at least ok to me (as I can't think of some better CSS solution) would be to apply box-shadow on .cdk-drag-placeholder. With lowered opacity. Also, transform should be disabled (otherwise placeholder will move). Something like this:

.cdk-drag-placeholder {
    box-shadow: 0 0 3px 3px *color*;
    opacity   : 0.6;
    transform : none !important;
}

Approximate result (dragging "Item 3" here):

[fmancuso]

+1

[amaylunagaria]

+1

[vvolodin]

+1, never lose hope

[Siminho9]

+1

[crisbeto]

This should be resolved by https://github.com/angular/components/pull/31288.

[angular-automatic-lock-bot[bot]]

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