- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
使用的框架
我在做什么
我有一个通过Firestore获取的数据列表
它已经根据 firestore 中的属性进行了排序
我安装了 Kendo Sortable 并将其导入到我的模块中
什么在起作用
什么不起作用
根据文档,我正在写入控制台以查看项目的索引
onDragStart() 的索引位置似乎是正确的
onDragEnd() 总是显示为 -1(见附件截图) console log of dragging items about
问题
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>
最佳答案
如果我具体理解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)
}
);
}));
});
关于angular - Kendo Sortable for Angular - 获取新的索引位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46951576/
我正在使用 jquery-ui sortable 并且我有一个 sortable inside other!重点是当我尝试使用 sortstop 函数时,parent sortable 也会运行(!请
我正在使用来自 Google CDN 的 jQuery 1.7 和 jQuery UI 1.8(因此我拥有最新版本)。 我的页面上有两个元素,一个标题导航和一个内容区域,其中包含与每个标题列表项相对应
我正在努力使以下工作正常进行: My Playlist drag div
我有以下 jQuery 代码: var isOk = true; $('#edit').click(function () { if (isOk) { $('table tbo
我正在使用 Rubaxas Sortable.js 来对列表进行排序。 我的问题是我只能将“.group_container”移动到主支架的底部,而不能移动到其他列表之间。 这是一个 jsFiddle
我正在使用 jQuery UI“可排序”插件来选择和排序项目。 我将插件设置为有两个列表,一个用于“可用”项目,第二个用于“选定”项目。 插件按预期工作,我可以将项目从一个列表移动到另一个列表。 但是
我正在使用 jQuery UI“可排序”插件来选择和排序项目。 我将插件设置为有两个列表,一个用于“可用”项目,第二个用于“选定”项目。 插件按预期工作,我可以将项目从一个列表移动到另一个列表。 但是
我正在 ui-sortable 的帮助下创建一个带有可拖动行的表格
这就是我要实现的目标:我有两个可排序列表,右边的列表连接到左边的列表。我希望能够从左侧列表中删除项目,方法是将它们放在垃圾箱中。我正在尝试将垃圾箱实现为 Droppable,但在 Droppable
考虑以下HTML i1 i2 i3 i4 i5 i6 i7 i8 我正在 sortcontaine
有人在http://jsfiddle.net/hKYWr/上整理了一个很好的 fiddle 。关于使用 angular-ui 和 jqueryui sortable 来获得良好的可排序效果。 如何在两
我正在使用这个小示例测试 Sortable.js 列表。我有一个要从中拖动的元素列表,以及另一个通过删除元素来存储它们的列表。 注意:Sortable.js 与 JQuery-ui sortable
stackoverflow上的相关问题0和 1 .JSFiddle:http://jsfiddle.net/ashugupt/hpncs/1/ 也试过如下排序: $(".fields").sortab
当使用 StofDoctrineExtensions(这是 Gedmo Doctrine Extensions 的 Symfony2 端口)可排序行为时,我不断收到此错误: This reposito
我正在尝试对列表进行排序,我从数据库中获取元素但是... Error: cannot call methods on sortable prior to initialization; attempt
我有一个容器,里面有 2 个 div: 一个是向左浮动的小的固定宽度左侧 div(类似于侧边菜单)。 第二个是流动的 div,它也向左浮动(以便能够与固定的 div 一起堆叠)。 第二个 div 具有
我已经将 sortable 和 jquery 引用导入到我的 html 中,但是,它说 Uncaught TypeError: $(...).sortable is not a function 和
我有一个 JQuery 可排序(1.7.1 可以根据需要更改)列表,如下所示: 1 2 3 4 5 第二个项目被锁定,因此如果尝试将项目 5 移动到插槽 2 中,它将进入插槽
我有两个可排序的列表,其中包含工作订单。第二个列表是Route,而第一个列表只是尚未添加到Route 列表中的所有工单的列表。这个想法是,用户按照特定顺序将工作订单拖到Route中,重新排列工作订单以
我正在使用 jqueryui 可排序小部件。我需要获取当前拖动元素的数据属性。 $(this).data('attribute_name') 在这里不起作用。我也尝试过其他一些方法,但没有得到正确的结
我是一名优秀的程序员,十分优秀!