Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Multi line Chips: Drag and Drop #1674

Open
mbasbb opened this issue Sep 8, 2022 · 2 comments
Open

Bug: Multi line Chips: Drag and Drop #1674

mbasbb opened this issue Sep 8, 2022 · 2 comments
Assignees
Labels
bug Something isn't working comp: angular Issues related to @sbb-esta/angular effort1: hours prio4: low Should be done after all higher priorities are done

Comments

@mbasbb
Copy link

mbasbb commented Sep 8, 2022

Describe the bug
Drag and Drop von Chips funktioniert bei auf mehreren Zeilen angezeigten Chips nicht sauber.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://angular.app.sbb.ch/angular/components/chips/examples
  2. Scroll down example 4, "Chips Drag and Drop". Verify that it works as expected.
  3. Narrow your browser window such that the chips in the example are shown on multiple lines, e.g. two lines.
  4. Drag and Drop now acts very weird.

StackBlitz
https://stackblitz.com/run?file=src%2Fapp%2Fchips-drag-drop-example.ts

Expected behavior
Drag and Drop von Chips funktioniert auch, wenn diese auf mehreren Zeilen angezeigt werden.
Ein Chip kann zeilenübergreifend verschoben werden. Während des Drag wird seine zukünftige Position angezeigt. Nach dem Drop hat das Chip die neue Position und die Daten sind entsprechend neu sortiert.

Screenshots
orange
orange is being dragged from the last(=third element on second row) position to the second(=second element on first row) position.

Desktop (please complete the following information):

  • OS: Win 10
  • Browser: Chrome
  • Version: 105

Additional context
Andere hatten das Problem auch schon, z.B. https://stackoverflow.com/questions/60315566/angular-material-drag-and-drop-multi-row-list

@mbasbb mbasbb added the bug Something isn't working label Sep 8, 2022
@mbasbb mbasbb changed the title Bug: Bug: Multi line Chips: Drag and Drop Sep 8, 2022
@kyubisation kyubisation added effort1: hours prio4: low Should be done after all higher priorities are done comp: angular Issues related to @sbb-esta/angular labels Sep 9, 2022
@mhaertwig
Copy link
Collaborator

Related to angular/components#13372

@nzbin
Copy link

nzbin commented Aug 14, 2023

It can be very easy to implement this feature with the ng-dnd library. I created an example for wrapped chips.
https://stackblitz.com/edit/867pxw?file=src%2Fexample%2Fchips-drag-drop-example.html

@mhaertwig mhaertwig self-assigned this Aug 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working comp: angular Issues related to @sbb-esta/angular effort1: hours prio4: low Should be done after all higher priorities are done
Projects
None yet
Development

No branches or pull requests

4 participants