angular / angular/components

Drag and Drop list ordering issue

オープン
#14,873 コメント 35 件 リアクション 5 件 担当者 0 名 GitHub で見る
area: cdk/drag-drop P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

issue の再現から始め、その markup を Angular Material CDK のドラッグ&ドロップ概要と比較します。cdkDropList と cdkDrag の設定を調べ、項目間をドラッグしている間の drop event の previousIndex と currentIndex を確認します。完了とは、ドラッグした項目が新しい位置に残り、リストデータが並べ替えられている状態です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
42/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。