angular / angular/components

Drag and Drop list ordering issue

Offen
#14,873 35 Kommentare 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/drag-drop P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der Reproduktion im Issue und vergleiche deren Markup mit der Übersicht zu Drag-and-Drop von Angular Material CDK. Untersuche das cdkDropList- und cdkDrag-Setup und überprüfe anschließend previousIndex und currentIndex des Drop-Events, während zwischen Elementen gezogen wird. Als erledigt gilt, wenn das gezogene Element an seiner neuen Position bleibt und die Listendaten neu angeordnet sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
42/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.