Drag and Drop in angular 4

Drag and Drop in angular 4

Drag and drop provide draggable & droppable directives and transfer a data from draggable and droppable. Through this, we can restrict drag and drop by the scopes and ability to add custom CSS.

Install angular latest

 npm install -g @angular/cli

Create an angular project

 ng new demoname

Angular serve

 ng serve

Install Drag and drop

 npm i angular4-drag-drop --save

app.module.ts

import { DragDropDirectiveModule} from "angular4-drag-drop";

To use the drag and drop components, import the module into an app.module.ts. This module exports two components

  1) DragDirective
  2) DropDirective

DragDirective, emitted an event by dragging and drop directive will accept an event from drag directive and drop an element in the module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DemoComponent } from "./components/demo-component";
import { DragDropDirectiveModule} from "angular4-drag-drop";

@NgModule({
  imports: [
      BrowserModule,
      DragDropDirectiveModule
  ],
  declarations: [DemoComponent],
  bootstrap: [DemoComponent]
})
export class AppModule {}

DragDirective

dragDirective - The dragdirective emits the array value when the array has a local variable as drag and values are passed through it to drop element.

dragHighlight - If custom CSS has added in the module, drag highlight will pass a custom CSS to the drop CSS class list of the element.

releaseDrop - Its the main function in drag directive, it will call a function, once the value is dropped, the user can splice the element in drag module.

startDrag - This function is used to identify that user dragging the item.

In HTML page

<div *ngFor="let drag of drag" [dragDirective]='drag' [dragHightlight]="'highlight'" (releaseDrop)="dragorder($event)" (startDrag)="startDrag(s)">
    {{drag.name}}
</div>

In typescript page

Declare a array name as drag and insert value.

 drag:any[]=[{'name':'home','name':'end'}];

Now call a function to drag a value from drag directive and insert to drop directive module.

private dragorder(event){
   let index = this.timetable.indexOf(event);
   this.drag.splice(index,1);
}

DropDirective

dropDirective - The dropdirective add an array value from drag module and making it a drop target.

dropHighlight - If custom CSS has added in the module, drag highlight will pass a custom CSS to the drop CSS class list of the element.

dropEventMouse - DropEventmouse is the main function of the dropdirective module. This will accept from emitting from drag event and it will give x and y coordinate. If you wish to get dropped array item just as

  let droppedObject = JSON.parse(event.dataTransfer.getData('text'));

In HTML page

<div *ngFor="let drop of drop" dropDirective (dropEventMouse)="droporder($event)" class="droppable" [dropHighlight]="'highlight'">

   {{drop.name}}

</div>

In typescript page

Declare a array name as drop and insert value.

drop:any[]=[{'name':'angular'},{'name':'angular2'},{'name':'angular4'}]

Call a function for accepts the emit of events from drag module and add it drop directive module.  

private droporder(event){

   let drop

   let droppedObject = JSON.parse(event.dataTransfer.getData('text'));

   this.drop.push(droppedObject.object);

}

Demo