如何使用 Firebase 列表/FirebaseListObservable 在 Angular2 中实现拖放 [英] How to implement drag and drop in Angular2 with a firebase list / FirebaseListObservable
问题描述
我正在尝试使用 angular2、firebase 和 dragula 实现拖放到列表中.如果已经构建了更好的模块,我不会使用 dragula,但这似乎很简单.到目前为止,我收到错误,因为 dragula 试图将列表重新排序,就好像它是一个普通数组一样.
I am trying to implement drag and drop into a list using angular2, firebase and dragula. I'm not tied to using dragula if there is a better module already built, but it seems simple. So far I get errors because dragula is trying to reorder the list as if it were a normal array.
<ul class="list-group" [dragula]="statusList" [dragulaModel]='statusService.$statuses'>
<li *ngFor="let status of statusService.$statuses | async" class="list-group-item">
<span class="handle">
<img src="../../images/handle.png" />
</span>
<span class="swatch" [style.backgroundColor]="status.color"></span>
<span class="title">
<inline-editor type="text" [(ngModel)]="status.title" (keyup.enter)="updateStatus(status, status.title)" (onSave)="updateStatus(status, status.title)" name="title" ngDefaultControl></inline-editor>
</span>
<a (click)="statusService.removeStatus(status)" class="remove-status">
<i class="fa fa-times"></i>
</a>
</li>
</ul>
我已经使用优先级属性实现了 firebase 和 angular 的拖放.但是,我在 Angular 2 中没有看到明确的方法.
I have implemented drag and drop with firebase and angular using the priority property. I am not seeing a clear way to do it in Angular 2, however.
推荐答案
Observable 非常适合创建拖放事件.
Observables are a perfect fit for creating drag-and-drop events.
基本上,这归结为:
- 您必须获得对将被拖动的元素的引用
您必须创建 3 个不同的 Observable:
- You have to get a reference to the element that will be dragged
You have to create 3 different Observables:
let down = Observable.fromEvent(draggedElement, 'mousedown');
let move = Observable.fromEvent(document, 'mousemove');
let up = Observable.fromEvent(document, 'mouseup');
您将 Observable 组合起来,以便当 draggedElement
上的新 mousedown
发出时,您可以获取所有 mousemove
事件,直到 mouseup
被触发.
You combine the Observables so that when a new mousedown
on the draggedElement
emits, you take all mousemove
events, until mouseup
is fired.
let dragAndDrop = down.flatMap(() => move.takeUntil(up));
您订阅了 dragAndDrop Observable 并且瞧
You subscribe to the dragAndDrop Observable and voila
dragAndDrop.subscribe(position => console.log(position));
这篇关于如何使用 Firebase 列表/FirebaseListObservable 在 Angular2 中实现拖放的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!