Kendo Sortable for Angular - 獲得新的索引位置

Question

使用的框架

• Angular和Kendo UI

我在做什么

• 我有一個通過Firestore獲得的數據列表

• 它已經根據firestore中的一個屬性訂購

• 我安裝了Kendo Sortable並導入我的模塊

什么在起作用

• 我可以拖動項目UI

什么不起作用

• 根據文檔，我正在寫入控制台以查看項目的索引

• 似乎onDragStart（）的索引位置似乎是正確的

• onDragEnd（）總是顯示為-1 （參見附件截圖） 拖動項目的控制台日志

問題

1. 我的目標是移動列表項並獲取他們的新索引項。 希望我可以編寫一個函數來將新位置寫回數據庫。 但是，有沒有辦法確定正確的'結束'指數？

Component.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

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

Answer 1

如果我具體了解ti，你想要一個摻雜文件的索引？

在這個Kendo Angular 2示例中，您可以看到您想要的索引（我添加了控制台日志以顯示索引在哪里）：

 private handleDragAndDrop(): Subscription {
    const sub = new Subscription(() => {});
    let draggedItemIndex;

    document.querySelectorAll('.k-grid-content tr')
    .forEach(item => {
        this.renderer.setAttribute(item, 'draggable', true);
        const dragStart = Observable.fromEvent(item, 'dragstart');
        const dragOver = Observable.fromEvent(item, 'dragover');
        const drop = Observable.fromEvent(item, 'drop');

        sub.add(dragStart.subscribe(({target}) => {
            draggedItemIndex = target.rowIndex;
            console.log("Drag start: " + target.rowIndex)
        }));

        sub.add(dragOver.subscribe((e: any) => e.preventDefault()));

        sub.add(drop.subscribe((e: any) => {
            e.preventDefault();
            const dataItem = this.gridData.data.splice(draggedItemIndex, 1)[0];
            const dropIndex = e.target.closest('tr').rowIndex;
            this.zone.run(() =>{
                console.log("Drag drop/stop: " + dropIndex)
                this.gridData.data.splice(dropIndex, 0, dataItem)
            }

            );
        }));
    });

http://plnkr.co/edit/gUGZM5yOG4v2CwvsjEV6?p=preview

Answer 2

我通過使用局部變量元素引用（例如#element ）來完成此操作。 通過將此參數作為參數傳遞給dragEnd事件，可以確定新訂單。

組件HTML

<kendo-sortable #sortable [data]="stages" (dragEnd)="onDragEnd(sortable.data)">
    <ng-template let-stage="item">
        <div draggable="true">{{stage.name}}</div>
    </ng-template>
</kendo-sortable>

組件.ts中的onDragEnd處理程序

public onDragEnd(data): void {
    let newOrder = data.map(o=>o.id);
}