[英]Kendo Sortable for Angular - Getting the new index position
Frameworks used 使用的框架
What I'm doing 我在做什么
I have a list of data obtained through Firestore 我有一个通过Firestore获得的数据列表
It's already ordered based on a property in firestore 它已经根据firestore中的一个属性订购
I have Kendo Sortable installed and imported into my module 我安装了Kendo Sortable并导入我的模块
What's Working 什么在起作用
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 似乎onDragStart()的索引位置似乎是正确的
onDragEnd() always appears as -1 (see attached screenshot) console log of dragging items about onDragEnd()总是显示为-1 (参见附件截图) 拖动项目的控制台日志
Questions 问题
Component.ts 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 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>
If i understand ti concretely, u want a index of doped file? 如果我具体了解ti,你想要一个掺杂文件的索引?
In this Kendo Angular 2 example you can see that index you wanted (i added console log to show you where is what index): 在这个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 http://plnkr.co/edit/gUGZM5yOG4v2CwvsjEV6?p=preview
I have done this by using a local variable element reference (eg #element
). 我通过使用局部变量元素引用(例如
#element
)来完成此操作。 By passing this as parameter to the dragEnd
event, it is possible to determine the new order. 通过将此参数作为参数传递给
dragEnd
事件,可以确定新订单。
Component HTML 组件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>
onDragEnd handler in Component .ts 组件.ts中的onDragEnd处理程序
public onDragEnd(data): void {
let newOrder = data.map(o=>o.id);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.