如何使用 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.

基本上，这归结为:

1. 您必须获得对将被拖动的元素的引用

2. 您必须创建 3 个不同的 Observable:

1. You have to get a reference to the element that will be dragged

2. 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屋！