**Frameworks used**

* Angular and Kendo UI

**What I'm doing**

* I have a list of data obtained through Firestore
* It's already ordered based on a property in firestore
* I have Kendo Sortable installed and imported into my module

**What's Working**

* I can drag the item UIs around

**What's Not Working**

* As per the documentation, i'm writing to the console to see the index of the item
* It seems like the index position for **onDragStart()** appears to be correct
* **onDragEnd()** always appears as **-1** (see attached screenshot)
[console log of dragging items about](https://i.stack.imgur.com/rX5Iv.png)

**Questions**

1. My aim is to move the list items around and get their new index item. From there hopefully I can write a function to write back the new positions to the database. However, is there a way to determine the correct 'end' index?

**Component.ts**

```ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Router, ActivatedRoute } from '@angular/router';
import { DataEvent, DragDropEvent } from '@progress/kendo-angular-sortable';

@Component({
  selector: 'app-albums-list',
  templateUrl: './albums-list.component.html',
  styleUrls: ['./albums-list.component.css'],
  encapsulation: ViewEncapsulation.None // testing
})

export class IssuesListComponent implements OnInit {

  private albumsCollection: AngularFirestoreCollection<any>;
  albums: Observable<any[]>;
  albumFolderId: string;

 //  KENDO TESTING

public events: string[][] = [[], []];

public onDataAdd(src: number, e: DataEvent): void {
  console.log(src, 'dataAdd', e.index);
}

public onDataRemove(src: number, e: DataEvent): void {
  console.log(src, 'dataRemove', e.index);
}

public onDragEnd(src: number, e: DragDropEvent): void {
  console.log(src, 'dragEnd', e.index);
}

public onDragOver(src: number, e: DragDropEvent): void {
  // Not logging due to the large number of events
}

public onDragStart(src: number, e: DragDropEvent): void {
  console.log(src, 'dragStart', e.index);
}

// private log(src: number, event: string, itemIndex: number): void {
//   this.events[src].push(`${event} - ${this.items[src][itemIndex]}`);
// }

  constructor(
    private readonly afs: AngularFirestore,
    private activatedRoute: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit() {

    // Look at the url for the Folder ID and set the local variable
    this.activatedRoute.params.forEach((urlParameters) => {
      this.albumFolderId = urlParameters['folderId'];

      // Return the issues list
      this.getAlbumData();

    });

  }

  getAlbumData() {

    this.albumCollection = this.afs.collection<any>(`/albumFolders/${this.albumFolderId}/albums`, ref => {
      return ref.orderBy('album_order');
    });

    // Get the data
    this.albums = this.albumCollection.snapshotChanges().map(actions => {

      return actions.map(a => {

        const data = a.payload.doc.data();

        const id = a.payload.doc.id;

        return { id, ...data };

      });
    });
  }
}

```

**Component.html**

```html
 <kendo-sortable
            [navigatable]="true"
            [animation] = "true"
            [data]="albums | async"
            class="list__ul"
            itemClass="list__li"
            activeItemClass=""
            (dataAdd)="onDataAdd(i, $event)"
            (dataRemove)="onDataRemove(i, $event)"
            (dragEnd)="onDragEnd(i, $event)"
            (dragOver)="onDragOver(i, $event)"
            (dragStart)="onDragStart(i, $event)"
            >

            <ng-template let-item="item">         
                <h2 class="list__h2"> {{ item.album_title }} </h2>
                <span class="list__sub"> {{ item.album_date}} </span>
            </ng-template>

        </kendo-sortable>

```