Question

我正在尝试使用angular2，firebase和dragula实现拖放到列表中。如果已经建立了更好的模块，我就不会使用dragula，但它看起来很简单。到目前为止，我得到错误，因为dragula正试图重新排序列表，就好像它是一个普通的数组。

＆＃13;

<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>

＆＃13;

我使用优先级属性实现了使用firebase和angular进行拖放。但是，我没有在Angular 2中看到明确的方法。

Answer 1

以下是实施细节：

我使用Alexander的建议来订阅firebase列表并创建一个本地数组：

＆＃13;

this.statusService.$statuses.subscribe((statuses: [IStatus]) => {
  this.statuses = []; //reset local array used with dragula for drag and drop
  for (let status of statuses) {
    this.statuses.push(status);
  }
})

＆＃13;

我使用了dragula的drop事件来遍历并更新数组中每个项目的优先级：

＆＃13;

dragulaService.drop.subscribe(() => {
  this.statuses.forEach((status, index) => {
    this.statusService.$statuses.update(status.$key, {
      priority: index
    });
  })
});

＆＃13;

我在查询中按优先顺序排序：

＆＃13;

this.$statuses = this.af.database.list(`/statuses/${session.$key}`, {
  query: {
    orderByChild: 'priority'
  }
});

＆＃13;

最后，我只使用本地数组作为dragula模型和* ngFor：

＆＃13;

<ul class="list-group" [dragula]="statusList" [dragulaModel]='statuses'>

  <li *ngFor="let status of statuses" class="list-group-item">
    
  etc...

＆＃13;

Answer 2

Observable非常适合创建拖放事件。

基本上，这归结为：

您必须获得对将要拖动的元素的引用

您必须创建3个不同的Observable：

let down = Observable.fromEvent(draggedElement, 'mousedown');
let move = Observable.fromEvent(document, 'mousemove');
let up = Observable.fromEvent(document, 'mouseup');

您组合了Observable，以便当mousedown上的新draggedElement发出时，您会收到所有mousemove个事件，直到mouseup被解雇。
```
let dragAndDrop = down.flatMap(() => move.takeUntil(up));
```

您订阅了dragAndDrop Observable并且瞧

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

如何使用firebase list / FirebaseListObservable在Angular2中实现拖放

2 个答案: