angular / angular/components

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

Abierto
#23,635 0 comentarios 0 reacciones 0 asignados Ver en GitHub
area: cdk/drag-drop P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### 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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza ejecutando las dos reproducciones enlazadas de StackBlitz e inspecciona src/app/app.component.html, comparando los casos cdkPreviewContainer y omitted-container. Se considera terminado cuando la vista previa aparece junto al cursor y el elemento se suelta en la lista desplegable bajo el cursor en ambos ejemplos SVG, incluido el comportamiento del navegador descrito.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.