如何使用Firebase列表/ FirebaseListObservable实现在Angular2中的拖放操作 [英] How to implement drag and drop in Angular2 with a firebase list / FirebaseListObservable

问题描述

我正在尝试使用angular2，firebase和dragula实现拖放操作。如果已经建好了一个更好的模块，我并没有使用dragula，但似乎很简单。到目前为止，我得到的错误，因为dragula正在尝试重新排列列表，就好像它是一个正常的数组。

< ul class =list-group[dragula] = statusList[dragulaModel] ='statusService。$ statuses'>< li * ngFor =let status status statusService。$ statuses | asyncclass =list-group-item> < span class =handle> < img src =../../ images / handle.png/> < /跨度> < 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 =titlengDefaultControl>< / inline-editor> < /跨度> < a（click）=statusService.removeStatus（status）class =remove-status> < i class =fa fa-times>< / i> < / A> < / li>< / ul>

使用优先级属性拖放Firebase和角度。然而，在Angular 2中我没有看到明确的方法。

Observable是创建拖放事件的完美选择。

基本上，这个boiled下面是：

1. 您必须获取对要拖动的元素的引用


2. 你必须创建3个不同的Observable：
   
   

     let down = Observable.fromEvent（draggedElement，'mousedown'）; 
    let move = Observable.fromEvent（document，'mousemove'）; 
    let up = Observable.fromEvent（document，'mouseup'）; 
     




3. 结合使用Observable，当一个新的 mousedown draggedElement 发出，所有的 mousemove 事件，直到 mouseup

   
   $ b

     let dragAndDrop = down.flatMap（（=）=> move.takeUntil向上））; 
     




4. 您订阅dragAndDrop Observable，并且瞧
   
   

     dragAndDrop.subscribe（position => console.log（position））; 
     




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>

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.

解决方案

Observables are a perfect fit for creating drag-and-drop events.

Basically, this boils down to this:

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');
   

3. 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));
   

4. You subscribe to the dragAndDrop Observable and voila

   dragAndDrop.subscribe(position => console.log(position));
   

这篇关于如何使用Firebase列表/ FirebaseListObservable实现在Angular2中的拖放操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！