angular / angular/components

bug(drag-drop): Draggable elements inside SVG DropList not spawning underneath cursor

Ouverte
#23,635 0 commentaires 0 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

#### Reproduction

Use StackBlitz to reproduce your issue:
- Components: https://stackblitz.com/fork/components-issue
- Harnesses: https://stackblitz.com/fork/harness-issue

Steps to reproduce:
1. Go to either https://stackblitz.com/edit/angular-droplist-with-previewcontainer?file=src/app/app.component.html
or https://stackblitz.com/edit/angular-droplist-without-previewcontainer?file=src/app/app.component.html
2. Drag the "Test" element to the other droplist
3. Release LMB


#### Expected Behavior

In both cases I would expect the "Preview" element to spawn next to the mouse cursor and to be dropped on the droplist under the cursor.

#### Actual Behavior

In the first example "with-previewcontainer" I use the `cdkPreviewContainer` attribute to spawn the "Preview" element inside the parent svg, in that case it spawns correctly, but the drop is offset. By moving the mouse cursor somewhere towards the bottom right of the page, the "Test" element can be seen moving to the other droplist.

In the second example "without-previewcontainer" the `cdkPreviewContainer` is omitted and the "Preview" element spawn at the top left of the page. The offset from the top left seems to correlate with the offset of the mouse cursor inside the droplist. Moving the mosue cursor far enough down and to the right will again make the "Test" element move to the other droplist.

The behaviour in Firefox seems to be slightly different.

#### Environment

- Angular: 12.2.6
- CDK/Material: 12.2.5
- Browser(s): Edge 93.0.961.52, Chrome 93.0.4577.82, Brave 1.29.81, Firefox 92.0.1
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par exécuter les deux reproductions StackBlitz liées et inspectez src/app/app.component.html, en comparant les cas cdkPreviewContainer et omitted-container. Le travail est terminé lorsque l’aperçu apparaît à côté du curseur et que l’élément est déposé dans la liste déroulante sous le curseur dans les deux exemples SVG, y compris le comportement du navigateur décrit.

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é
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

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