feat(drag-drop): add option for items to be returned to original list if not dropped on container

[MrPollux]

Steps to reproduce:

1. Have 2 drop containers.
2. Drag item from one container.
3. Move over the items of the other container
4. Move outside any container.
5. Release button.

Expected Behavior

The item should transform to initial container and initial position.

Actual Behavior

The item transforms to the position of the last hovered item of the last entered container.

Environment

• Angular: 9.0.2
• CDK/Material: 9.1.0
• Browser(s): Google Chrome Version 80.0.3987.116
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Pro

[crisbeto]

I couldn't reproduce it against any of the examples from the docs, but I'm not sure I understand the instructions. At step 2 am I supposed to move one item, but then at step 3 move over all the other items?

[Achilles1515]

I couldn't reproduce it against any of the examples from the docs, but I'm not sure I understand the instructions. At step 2 am I supposed to move one item, but then at step 3 move over all the other items?

He's talking about the design decision of how letting go of a dragged item will always send it back to the last sorted container, and not necessarily the initial container (which is desired in his case). It seems it would be a good option, and sort of falls under the same category of an "abort drag" feature that resets all containers back to initial state before any isDragging occured.

[crisbeto]

I see. The reason why it currently works this way is that it would look weird if we snapped it back into the initial list, because there's nothing taking up the space for it anymore.

[MrPollux]

@Achilles1515: You're right.

I solved it as follows:

onDragStarted(event: CdkDragStart<T>) { this.dragRect = event.source.element.nativeElement.getBoundingClientRect(); }

onDragReleased(event: CdkDragRelease<T>) { const placeholder = event.source.getPlaceholderElement(); placeholder.style.transform = ""; const rect = placeholder.getBoundingClientRect(); const x = this.dragRect.left - rect.left; const y = this.dragRect.top - rect.top; placeholder.style.transform = translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0); }

I hope there would be a better way. DropListRef._isOverContainer is private :-(

[Achilles1515]

@MrPollux Can you add your droplist event code?

[MrPollux]

@Achilles1515 data-table.zip

[tonyholt]

@MrPollux, @Achilles1515, this zip file is no longer available, could you upload it again?

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[yusijs]

I have a similar requirement where I want to move something between two lists. I'm able to reset it by checking the isPointerOverContainer attribute, but it looks a bit weird when I'm dragging the element around, since it appears like it will land in a given container, but that's no longer the case so the behaviour gets inconsistent. Some way to define this behaviour would be really good imo (either with an input on the droplist / drag-element or via an injection token)