Angular Drag and Drop

MD
R
Markdown

Required imports to allow native drag and drop from Angular. https://material.angular.io/cdk/drag-drop/examples

package.json

"@angular/animations": "^7.2.2",
"@types/moment": "^2.13.0",
"@angular/cdk": "^7.2.2",
"@angular/service-worker": "^7.2.2",
  "moment": "^2.22.2",
"@angular/http": "^7.2.2",
"ionicons": "^4.4.4",

app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { JsonpModule, Jsonp, Response } from '@angular/http';

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  DragDropModule,
  FormsModule,
  AuthModule.forRoot(),
  AppRoutingModule,
  HttpClientModule,
  JsonpModule,
  ReactiveFormsModule]

providers: [
ApiService
]

my-component.ts

import {
  Component,
  OnInit,
  ChangeDetectorRef,
  ViewChildren,
  ViewEncapsulation,
  QueryList, ViewChild, ElementRef, Inject, Renderer2, EventEmitter, Output
} from '@angular/core';
import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
import { ReactiveFormsModule, FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Router, ActivatedRoute, Params, Data } from '@angular/router';
import { Title } from '@angular/platform-browser';
import * as moment from 'moment';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
import { combineLatest } from 'rxjs';

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.dayResults, event.previousIndex, event.currentIndex);
    this.swapOrder(
      { item: this.dayResults[event.previousIndex],
        order: event.previousIndex },
      {item: this.dayResults[event.currentIndex],
        order: event.currentIndex }
    );
  }

my-component.html

<ul class="activity-list margin-v-0" cdkDropList (cdkDropListDropped)="drop($event)">
  <li class="task-item" cdkDrag *ngFor="let result of dayResults" [type]="'current'" [projects]="projects" [task]="result" (changed)="onTasksChanged('day')"> </li>
</ul>

Created on 3/7/2019