title: How to implement drag and drop in Angular2 with a firebase list / FirebaseListObservable
body: <p>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.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="list-group" [dragula]="statusList" [dragulaModel]='statusService.$statuses'&gt;
  &lt;li *ngFor="let status of statusService.$statuses | async" class="list-group-item"&gt;
      
      &lt;span class="handle"&gt;
          &lt;img src="../../images/handle.png" /&gt;
      &lt;/span&gt; 
     
      &lt;span class="swatch" [style.backgroundColor]="status.color"&gt;&lt;/span&gt;
      
      &lt;span class="title"&gt;
          &lt;inline-editor type="text" [(ngModel)]="status.title" (keyup.enter)="updateStatus(status, status.title)" (onSave)="updateStatus(status, status.title)" name="title" ngDefaultControl&gt;&lt;/inline-editor&gt;
      &lt;/span&gt;
  
      &lt;a (click)="statusService.removeStatus(status)" class="remove-status"&gt;
          &lt;i class="fa fa-times"&gt;&lt;/i&gt;
      &lt;/a&gt;
                        
  &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/Q8hE9.png" rel="nofollow"><img src="https://i.stack.imgur.com/Q8hE9.png" alt="enter image description here"></a></p>