angular / angular/components

bug(cdkDrag): Can't reorder edge items with different size and boundary

Ouverte
#27,801 4 commentaires 3 réactions 0 personnes assignées Voir sur GitHub
area: cdk/drag-drop P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

I'm implementing draggable horizontal list, each item may has different width (depending on content). In case if first item is shorter than second and I want swop them and I capture second item closer to right edge it's impossible to set second item as first.
Note: cdkDrag constrained by X axis and has boundary
`cdkDragLockAxis="x" [cdkDragBoundary]="dropContainer"`

### Reproduction

StackBlitz link: https://stackblitz.com/edit/roitsa?file=src%2Fexample%2Fcdk-drag-drop-horizontal-sorting-example.ts
Steps to reproduce:
1. Capture "Bronze age" closer to right side (red area in the example)
2. Try to make it first in the list (swop with "Iron")

I was trying to make workaround with `cdkDragConstrainPosition` but without success as with this function behaviour changes, item reorders immediately if I drag left. Seems weird or I do something wrong
Example with `cdkDragConstrainPosition` : https://stackblitz.com/edit/roitsa-6kbo4x?file=src%2Fexample%2Fcdk-drag-drop-horizontal-sorting-example.html

### Expected Behavior

Ability to reorder edge items constrained by cdkDragBoundary

### Actual Behavior

Can't reorder edge items

### Environment

- Angular: v16
- CDK/Material:
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par les reproductions StackBlitz liées, en particulier cdk-drag-drop-horizontal-sorting-example.ts et son HTML, et reproduisez le cas d’une liste horizontale avec cdkDragLockAxis="x" et cdkDragBoundary. Suivez l’impact du déplacement contraint par les limites sur le tri lorsque les éléments aux extrémités ont des largeurs différentes ; le travail est terminé lorsque l’élément Bronze age peut être réordonné avant Iron depuis chacune des deux positions de capture.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
55/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.