angular / angular/components

Drag and Drop list ordering issue

Aperta
#14,873 35 commenti 5 reazioni 0 assegnatari Vedi su GitHub
area: cdk/drag-drop P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### What is the expected behavior?
I am trying to reproduce the simple drag and drop list ordering example from here: https://material.angular.io/cdk/drag-drop/overview

#### What is the current behavior?
However, the dragged item always snaps back to its original place. The ordering animation is showing. The event shows that the previous and the current index are always 0.
https://i.imgur.com/1RkV6MT.gifv
https://i.imgur.com/k4wMbt3.gifv

#### What are the steps to reproduce?
The drop listener and the test data:
```
strings = ["dsfs","fgjdf","ghama","jéép"];
drop(event: CdkDragDrop) {
console.log(event);
moveItemInArray(this.strings, event.previousIndex, event.currentIndex);
}
```
The HTML:
```


{{string}}

```
The CSS is copy-paste from the tutorial
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: 6.2.1
Material: 7.2.1
OS: Ubuntu 16.04
TypeScript: 3.2.2
Chrome: 65.0.3325.146

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione nell’issue e confronta il relativo markup con la panoramica del trascinamento della selezione di Angular Material CDK. Esamina la configurazione di cdkDropList e cdkDrag, quindi verifica previousIndex e currentIndex dell’evento di rilascio durante il trascinamento tra gli elementi. Il lavoro è completato quando l’elemento trascinato rimane nella nuova posizione e i dati dell’elenco vengono riordinati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
42/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.