Drag and Drop list ordering issue

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

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

Bắt đầu bằng việc tái hiện trong issue và so sánh markup của nó với phần tổng quan về kéo và thả của Angular Material CDK. Kiểm tra thiết lập cdkDropList và cdkDrag, sau đó xác minh previousIndex và currentIndex của drop event khi kéo giữa các mục. Được xem là hoàn tất khi mục được kéo vẫn ở vị trí mới và dữ liệu danh sách đã được sắp xếp lại.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.