Drag Drop Sortable, mixed orientation support

[abdulkareemnalband]

Feature request,

Mixed direction support, such as items placed by flex-wrap: wrap

What is the expected behavior?

Should be able to use sortable drag drop on both vertical and horizontal axis at the same time

What is the current behavior?

Only vertical or horizontal is supported

What are the steps to reproduce?

https://stackblitz.com/github/vbwioxyq

Github repo link

https://github.com/abdulkareemnalband/ng-drag-drop/tree/prebuilt-css

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.0.0-beta.4
Node: 8.11.4
OS: win32 x64
Angular: 7.0.0-rc.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.9.0-beta.4
@angular-devkit/build-angular     0.9.0-beta.4
@angular-devkit/build-optimizer   0.9.0-beta.4
@angular-devkit/build-webpack     0.9.0-beta.4
@angular-devkit/core              7.0.0-beta.4
@angular-devkit/schematics        7.0.0-beta.4
@angular/cdk                      7.0.0-beta.2
@angular/cli                      7.0.0-beta.4
@angular/flex-layout              6.0.0-beta.16
@angular/material                 7.0.0-beta.2
@ngtools/webpack                  7.0.0-beta.4
@schematics/angular               7.0.0-beta.4
@schematics/update                0.9.0-beta.4
rxjs                              6.3.3
typescript                        3.1.1
webpack                           4.19.1

[100cm]

@jelbourn hey ,have any progress about this issue now?

[IhorHolovatsky]

Are there any workarounds for drag and drop in mat-grid-list (reordering items in the grid)?

I have an idea, to mark each item in the grid as 'cdkDropList', and handle reordering as dropping item from one cdkDropList to another

  <mat-grid-list [cols]="photoCols"
                       rowHeight="1:1"
                       gutterSize="20px">
          <mat-grid-tile *ngFor="let photo of photos$ | async"
                         cdkDrag
                         cdkDropList
                         (cdkDragEnded)="dragEnded($event)">
            <app-photo-item [Photo]="photo"
                            (OnSelectionChange)="onSelectionChange($event)"></app-photo-item>
          </mat-grid-tile>
</mat-grid-list>

If it will work, I will provide demo

[vupham-zingbox]

How come the demo gif shows different with what it can provide ? https://cdn-images-1.medium.com/max/800/1*i30ZQdBC7CKbXXdOrUNQcg.gif

[100cm]

@vupham-zingbox +1 , i want to know how to implement what the demo shows

[abdulkareemnalband]

@IhorHolovatsky Nice idea
but only works when no of items in per row is known before hand
But when content reflows on window resize, this is not pretty

[demisx]

Would be nice if what's shown in the demos was actually backed up by the framework code.

[BovineEnthusiast]

Copy and pasting my comment from #13889 since it was a duplicate:

To give an example of the issue, I have a horizontal list of photos that needs to wrap (using fxLayout="row wrap", as the issue description states). However, when it spans multiple lines, it breaks:

[PhoebePan]

@MrSnappingTurtle Do you have demo code of multiple list wrap? Thanks :)

[AsafAgranat]

This is difficult to implement in the current way it was implemented in the CdkDrag directive. The positioning of the placeholder, and the positions of each item that is clearing way for the placeholder, are done by setting inline CSS transforms to each of the involved elements. This is done in a predictable fashion, meaning that since the dimensions of the dragged element are known from the moment it is dragged, it can be calculated for each of the elements in the list how many pixels they should be shifting back/forth. The calculation is eased further by limiting the transforms to a single axis, allowing the transforms to ignore the widths (or heights in horizontal mode) of elements in the list.

On the other hand, when a list is wrapping, the wrapped elements are being wrapped in an arbitrary manner, calculated by the browser. When so, it is impossible to translate (transform) list elements in a similar predictability, because it is not known (upon drag event) which list elements are wrapping, and where they are positioned relatively within the list.

To circumvent that, upon every drag event, a new snapshot of the list (and all connected lists) must be generated, where the list DOM is being traversed, and each list element gets registered for width and height (practically creating a matrix). Considering that Material devs tried to solve this directive through a performative approach, traversing the DOM and registering each element is not an option as it taxes the browser significantly, and veers from the predictability approach.

Alternatively, a middle ground can be implemented. It is less performative than current solution, but at the same time does not require any heavy calculations. Instead of shifting elements via transform, the placeholder element should be moved (currently it remains in the place of the original dragging element), to be positioned before or after the target drop element. It then could animate the max-height property (or max-width for horizontal). This, as I mentioned, is less performative, but it does allow to shift the placeholder anywhere in the list - even in a wrapping list.

[allenz0810]

for time being you can take a look this - https://github.com/smnbbrv/angular-sortablejs-demo/tree/master/src/app/examples/multiple-lists

[flolu]

Thank you! I appreciate your help, I'll check it out. Best regards, Flo

[c3rber]

here is a workaround with using multiple lists
https://stackblitz.com/edit/angular-nuiviw

[100cm]

@c3rber That was wonderful! You are my best friend! Thanks a lot ! i will try it.

[NurGuz]

@c3rber Wow, it's work for me, thx.

But.... Any OFFICIAL progress about this issue? It's for make and standar to this.

Thx

[RobinBomkampDv]

@c3rber Yeah, it is working fine.

Is there a way of animating @c3rber workaround?

[NurGuz]

@c3rber

Don't work correcty.

If u add a button, for example, for add new items and after reorder the items doesn't work. If you move the ultimate element in tother place don't reorganize correctly

I think that the problem is <div class="example-container" cdkDropListGroup> besacuse @ViewChild(CdkDropListGroup) listGroup: CdkDropListGroup<CdkDropList>; don't update correctly

[Zefling]

As promised, posting the updated solution of angular 16 drag and drop workaround with renderer2 based on @c3rber' s solution - https://stackblitz.com/edit/angular-m4vl96?file=src%2Fapp%2Fapp.component.ts

Seems not work when item length are not same.

With a little change, it's possible, but not perfect. An adaptation of the c3rber solution, in this example with this open source project:
https://classement.ikilote.net/edit/1bf35e6df5c43b29c6120d9a3514f9160f564f7d

[hoangngk]

As promised, posting the updated solution of angular 16 drag and drop workaround with renderer2 based on @c3rber' s solution - https://stackblitz.com/edit/angular-m4vl96?file=src%2Fapp%2Fapp.component.ts

Seems not work when item length are not same.

Me neither

[jsculsp]

As promised, posting the updated solution of angular 16 drag and drop workaround with renderer2 based on @c3rber' s solution - https://stackblitz.com/edit/angular-m4vl96?file=src%2Fapp%2Fapp.component.ts

Seems not work when item length are not same.

With a little change, it's possible, but not perfect. An adaptation of the c3rber solution, in this example with this open source project: https://classement.ikilote.net/edit/1bf35e6df5c43b29c6120d9a3514f9160f564f7d

It works, thx! Here's a little optimization in drop method:

let indexTarget = event.container.data.index;
// Even if the item is dragged, the original drop list still exists(with zero item).
if (indexFrom < indexTarget) {
    indexTarget--;
 }
// currentIndex === 1 means the dragged item is on the right side of target drop list
if (event.currentIndex === 1) {
    indexTarget++;
}

[hoangngk]

As promised, posting the updated solution of angular 16 drag and drop workaround with renderer2 based on @c3rber' s solution - https://stackblitz.com/edit/angular-m4vl96?file=src%2Fapp%2Fapp.component.ts

Seems not work when item length are not same.

With a little change, it's possible, but not perfect. An adaptation of the c3rber solution, in this example with this open source project: https://classement.ikilote.net/edit/1bf35e6df5c43b29c6120d9a3514f9160f564f7d

It works, thx! Here's a little optimization in drop method:

let indexTarget = event.container.data.index;
// Even if the item is dragged, the original drop list still exists(with zero item).
if (indexFrom < indexTarget) {
    indexTarget--;
 }
// currentIndex === 1 means the dragged item is on the right side of target drop list
if (event.currentIndex === 1) {
    indexTarget++;
}

do you have a stackblitz? @jsculsp thanks a lot

[julianosouzanh]

As promised, posting the updated solution of angular 16 drag and drop workaround with renderer2 based on @c3rber' s solution - https://stackblitz.com/edit/angular-m4vl96?file=src%2Fapp%2Fapp.component.ts

Seems not work when item length are not same.

With a little change, it's possible, but not perfect. An adaptation of the c3rber solution, in this example with this open source project: https://classement.ikilote.net/edit/1bf35e6df5c43b29c6120d9a3514f9160f564f7d

It works, thx! Here's a little optimization in drop method:

let indexTarget = event.container.data.index;
// Even if the item is dragged, the original drop list still exists(with zero item).
if (indexFrom < indexTarget) {
    indexTarget--;
 }
// currentIndex === 1 means the dragged item is on the right side of target drop list
if (event.currentIndex === 1) {
    indexTarget++;
}

do you have a stackblitz? @jsculsp thanks a lot

I tried it but not working for me, would have an example this optimization?

[Cammeritz]

@hoangngk @julianosouzanh

This is what @Zefling was refering to:
https://git.ikilote.net/classement/classement/-/blob/master/src/app/content/classement/classement-edit.component.ts?ref_type=heads

With a little change, it's possible, but not perfect. An adaptation of the c3rber solution, in this example with this open source project:
https://classement.ikilote.net/edit/1bf35e6df5c43b29c6120d9a3514f9160f564f7d

[iFederx]

@aybarsakgun

Yes, i already updated. Here: https://stackblitz.com/edit/angular-cdk-mixed-orientation-drag-drop

This is the best solution for me, thanks

[stasberkov]

Angular/material team, we are waiting for the fix for 5 years. For my team this is the only issue that prevents us from replacing jquery draggable with material drag-drop.

[nabby27]

Hello, I have been subscribed to this issue for more than 4 years, I even made an approximation of what this issue is intended to solve in this codepen.

I have recently released Opire and I think this issue is ideal for the use cases it solves. With Opire anyone can create rewards on issues (as long as the repository has the bot installed) so all the people affected by this issue, like me, could put up money for someone to solve it. Without a doubt, this would be an issue in which I would put a reward

[Zefling]

Angular/material team, we are waiting for the fix for 5 years. For my team this is the only issue that prevents us from replacing jquery draggable with material drag-drop.

I think at some point I'll do my version. I had to extend and break the code to successfully create a mix between the 2 drap'n drop modes, but it's not satisfactory:
https://git.ikilote.net/classement/classement/-/blob/master/src/app/directives/dropzone.directive.ts

[evheniyrz]

"@angular/cdk": "^17.3.4",
"@angular/material": "^17.3.4",
The CdkDragDrop event returns the wrong value for previousIndex if multiline content is defined.

VIEW
<div class="drop-list" CdkDropListGroup>
<div
    class="target-drop-container"
    id="targetContainer"
    #targetContainer
    cdkDropList
    cdkDropListOrientation="horizontal"
    (cdkDropListDropped)="drop($event)"
  >
@for(item of itemList; track item;let idx = $index){
    <div class="drag-item" [id]="'drag-item-' + idx" cdkDrag>
     <p>draggable item</p>
    </div>
    }
</div> 
</div>

TS
  drop(event: CdkDragDrop<DropItem>): void {
    if (event.container === event.previousContainer) {
      console.log('IN SAME', { event });
     }
  }

when the content is one line then the value for index is correct.

[kritarth2121]

I faced this problem too. Based on @c3rber 's solution, I created a solution for Angular 14. Solution example: https://stackblitz.com/edit/angular-cdk-mixed-orientation-drag-drop

Well done!

Thanks i

I faced this problem too. Based on @c3rber 's solution, I created a solution for Angular 14. Solution example: https://stackblitz.com/edit/angular-cdk-mixed-orientation-drag-drop

Well done!

It worked as well for me.

[stasberkov]

Thank you so much! Long-awaited feature.

[nghiadg]

I have tried and realized the solutions above don't work perfectly. So I make my own solution using cdkDragFreeDragPosition.
It works as well for me!
I hope it can be helpful for everyone!

https://stackblitz.com/edit/stackblitz-starters-ccrfbf?file=src%2Fapp%2Fdrag-drop-grid%2Fdrag-drop-grid.component.ts

[nghiadg]

I have tried and realized the solutions above don't work perfectly. So I make my own solution using cdkDragFreeDragPosition. It works as well for me! I hope it can be helpful for everyone!

https://stackblitz.com/edit/stackblitz-starters-ccrfbf?file=src%2Fapp%2Fdrag-drop-grid%2Fdrag-drop-grid.component.ts

I made version 2 based on the pull request of the feature for angular 18.1.0-next 4
https://stackblitz.com/edit/stackblitz-starters-w8nsnk?file=src%2Fmain.ts

[nghiadg]

I have refactored the code before
https://stackblitz.com/edit/stackblitz-starters-3ybwzj?file=src%2Fapp%2Fdrag-drop-mixed%2Fdrag-drop-mixed.component.ts

[angular-automatic-lock-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.}