feat(drag-drop): add directive to connect drop lists automatically #13754

crisbeto · 2018-10-22T20:04:12Z

Currently the only way to connect drop lists is via the cdkDropListConnectedTo input which works if the consumer knows the amount of drop lists that they're going to have. For dynamic lists they can pass a list of ids, however that can be a little boilerplate-y. These changes introduce the cdkDropListGroup directive which can be used to connect a dynamic list of drop containers automatically.

Fixes #13750.

crisbeto · 2018-10-22T20:05:07Z

src/cdk/drag-drop/drop-list.ts


  ngOnInit() {
    this._dragDropRegistry.registerDropContainer(this);
+
+    if (this._group) {
+      this._group._items.add(this);


I was debating whether this should live in the CdkDropRegistry. I decided not to do it, because it was adding a fair bit of code for no real benefit.

jelbourn

LGTM

jelbourn · 2018-10-24T23:46:44Z

src/cdk/drag-drop/drag-drop.md

@@ -39,6 +39,19 @@ referencing the `id` of another drop container:
 <div cdkDropList id="list-two" [cdkDropListConnectedTo]="['list-one']"></div>
 ```

+If you have an unknown amount of connected drop lists, you can use the `cdkDropListGroup` directive


"amount" -> "number"

ngbot · 2018-11-03T00:31:17Z

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

lightheaded · 2018-11-07T11:32:33Z

This is fantastic and immensely useful! Much appreciated, @crisbeto

sroettering · 2018-11-07T16:52:05Z

Doesn't this approach for grouping drop lists require the lists to be in the same template?
How would you handle an arbitrary and dynamic number of drop lists that are scattered around the application?
I'm thinking of a use case where you have a list of items in a sidebar that can be dragged around and dropped in different lists or tables on the page. So there would be a need for a drop list group that can cross component boundaries.

Before seeing this PR I was thinking about an API for a drop list group mechanism like this:

<div cdkDropList [cdkDropListGroup]="<some-group-id>">
    <!-- Some draggable items in here -->
</div>

philmtd · 2018-11-07T21:39:09Z

Having cdkDropLists connected with an identifier or something similar would be gold!

Currently the only way to connect drop lists is via the `cdkDropListConnectedTo` input which works if the consumer knows the amount of drop lists that they're going to have. For dynamic lists they can pass a list of ids, however that can be a little boilerplate-y. These changes introduce the `cdkDropListGroup` directive which can be used to connect a dynamic list of drop containers automatically. Fixes angular#13750.

crisbeto · 2018-11-08T08:14:07Z

@sroettering at that point it would be better to generate some kind of identifier for each item and then connect them through cdkDropListConnectedTo. This directive is intended the to handle the most common use case where you have an unknown amount of connected lists within the same component.

@philmtd You can already connect lists by their string id.

philmtd · 2018-11-08T08:58:21Z

Yes but then I'd need to know how many lists there are and which IDs they have. When I have lists generated by an *ngFor and additionally other lists that are static it would probably be easier to connect them by a group id.

lightheaded · 2018-11-08T09:02:21Z

@philmtd while I agree with the idea, you are describing a different use case more appropriate for a separate pull request extending the functionality of cdkDropListConnectedTo to allow connecting lists via classes or something similar

sroettering · 2018-11-08T13:59:34Z

@lightheaded sure this would be another pull request, but that functionality would make this pull request obsolete. So maybe it should be discussed a little more.

sebamed · 2018-11-11T13:56:55Z

Hey guys, glad I found this feature. But, I'm having some troubles implementing it, can't really get it to work. Could anyone take a look at this question on stackoverflow?

EDIT

After some struggle, I managed to find a workaround with list ids array. Check my answer here.

crisbeto · 2018-11-11T17:33:33Z

These changes haven't been released yet.

…13754) Currently the only way to connect drop lists is via the `cdkDropListConnectedTo` input which works if the consumer knows the amount of drop lists that they're going to have. For dynamic lists they can pass a list of ids, however that can be a little boilerplate-y. These changes introduce the `cdkDropListGroup` directive which can be used to connect a dynamic list of drop containers automatically. Fixes #13750.

FritzHerbers · 2018-11-19T13:33:16Z

Besides having a grouped functionality I needed a list who can act as a template. Drags can be transfered/copied from the template to any list.

I wrapped the cdkDropList in a component, which registers/unregisters itself to a dragging service, specifiying the group and if it is a template. [cdkDropListConnectedTo] queries with group and isTemplate the dragging service.

Having a register/unregister callback would be nice, and also keeps the strategy wanted part of the application.

Adds an example that was being embedded in the readme, but isn't in the docs. It seems like it was missed in angular#13754 where a reference to it was introduced.

Adds an example that was being embedded in the readme, but isn't in the docs. It seems like it was missed in #13754 where a reference to it was introduced.

Adds an example that was being embedded in the readme, but isn't in the docs. It seems like it was missed in angular#13754 where a reference to it was introduced.

angular-automatic-lock-bot · 2019-09-10T03:02:22Z

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

crisbeto added the target: patch This PR is targeted for the next patch release label Oct 22, 2018

crisbeto assigned jelbourn Oct 22, 2018

crisbeto commented Oct 22, 2018

View reviewed changes

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Oct 22, 2018

jelbourn approved these changes Oct 24, 2018

View reviewed changes

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Oct 24, 2018

crisbeto force-pushed the 13750/drop-list-group branch from 4515121 to 554c727 Compare October 25, 2018 17:44

crisbeto force-pushed the 13750/drop-list-group branch from 554c727 to 10d06f7 Compare November 3, 2018 16:58

crisbeto mentioned this pull request Nov 6, 2018

bug: ngIf disables cdkDropListConnectedTo #13998

Closed

crisbeto force-pushed the 13750/drop-list-group branch from 10d06f7 to 3715fa6 Compare November 8, 2018 08:11

vivian-hu-zz merged commit 962dbeb into angular:master Nov 10, 2018

crisbeto mentioned this pull request Nov 12, 2018

[CdkDrag]: Allow out of scope binding with drop container #14099

Open

crisbeto mentioned this pull request Dec 17, 2018

docs(drag-drop): add missing example #14548

Merged

jelbourn pushed a commit that referenced this pull request Dec 18, 2018

docs(drag-drop): add missing example (#14548)

d304b41

Adds an example that was being embedded in the readme, but isn't in the docs. It seems like it was missed in #13754 where a reference to it was introduced.

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(drag-drop): add directive to connect drop lists automatically #13754

feat(drag-drop): add directive to connect drop lists automatically #13754

Uh oh!

crisbeto commented Oct 22, 2018

Uh oh!

crisbeto Oct 22, 2018

Uh oh!

jelbourn left a comment

Uh oh!

jelbourn Oct 24, 2018

Uh oh!

ngbot bot commented Nov 3, 2018

Uh oh!

lightheaded commented Nov 7, 2018

Uh oh!

sroettering commented Nov 7, 2018

Uh oh!

philmtd commented Nov 7, 2018

Uh oh!

crisbeto commented Nov 8, 2018

Uh oh!

philmtd commented Nov 8, 2018

Uh oh!

lightheaded commented Nov 8, 2018 •

edited

Loading

Uh oh!

sroettering commented Nov 8, 2018

Uh oh!

sebamed commented Nov 11, 2018 •

edited

Loading

Uh oh!

crisbeto commented Nov 11, 2018

Uh oh!

FritzHerbers commented Nov 19, 2018

Uh oh!

angular-automatic-lock-bot bot commented Sep 10, 2019

Uh oh!

Uh oh!

feat(drag-drop): add directive to connect drop lists automatically #13754

feat(drag-drop): add directive to connect drop lists automatically #13754

Uh oh!

Conversation

crisbeto commented Oct 22, 2018

Uh oh!

crisbeto Oct 22, 2018

Choose a reason for hiding this comment

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

jelbourn Oct 24, 2018

Choose a reason for hiding this comment

Uh oh!

ngbot bot commented Nov 3, 2018

Uh oh!

lightheaded commented Nov 7, 2018

Uh oh!

sroettering commented Nov 7, 2018

Uh oh!

philmtd commented Nov 7, 2018

Uh oh!

crisbeto commented Nov 8, 2018

Uh oh!

philmtd commented Nov 8, 2018

Uh oh!

lightheaded commented Nov 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sroettering commented Nov 8, 2018

Uh oh!

sebamed commented Nov 11, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

crisbeto commented Nov 11, 2018

Uh oh!

FritzHerbers commented Nov 19, 2018

Uh oh!

angular-automatic-lock-bot bot commented Sep 10, 2019

Uh oh!

Uh oh!

lightheaded commented Nov 8, 2018 •

edited

Loading

sebamed commented Nov 11, 2018 •

edited

Loading