NgDragDropPlus

Table of contents:

• Installation
• How it works
• Usage
• License

Installation

npm i ng-drag-drop-plus --save

How it works

Include the ng-calendar-plus module in your application at any place. The recommended way is to add forRoot initialization in the main app module.

import { NgDragDropPlusModule } from 'ng-drag-drop-plus';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgDragDropPlusModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Usage

import { Component } from '@angular/core';
import { NgDragDropPlusService } from 'ng-drag-drop-plus';
// import { NgDragDropPlusService } from 'projects/ng-drag-drop-plus/src/public-api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'NgDragDropPlus';
  Available = 'Available';
  Selected = 'Selected';
  courses = [
    {
      name: 'Angular'
    },
    {
      name: 'Node js'
    },
    {
      name: 'Sql Server'
    },
    {
      name: 'Docker'
    },
  ];

  selectedCourses = [];

  constructor(private ngDragDropPlusService: NgDragDropPlusService) {
    this.ngDragDropPlusService.onDropSub.subscribe((event) => this.dropCourse(event));
  }


  dropCourse(event: DraggedEvent) {
    const { data, source, destination } = event;
    if (source === this.Available && destination === this.Selected) {
      const index = this.courses.findIndex(c => c.name === data.name);
      if (index !== -1) {
        const course = this.courses.splice(index, 1);
        this.selectedCourses.push(course[0]);
      }
    } else if (source === this.Selected && destination === this.Available) {
      const index = this.selectedCourses.findIndex(c => c.name === data.name);
      if (index !== -1) {
        const course = this.selectedCourses.splice(index, 1);
        this.courses.push(course[0]);
      }
    }
  }
}

example use directives like below html

<div droppable [dragDestination]="Available" class="container">
  <h2>Available Courses</h2>
  <ul *ngFor="let course of courses">
    <li draggable [dragData]="course" [dragSource]="Available" class="course-item">
      {{course.name}}
    </li>
  </ul>
</div>
<div droppable [dragDestination]="Selected" class="container">
  <h2>Dropped Courses</h2>
  <ul *ngFor="let course of selectedCourses">
    <li draggable [dragData]="course" [dragSource]="Selected" class="course-item">
      {{course.name}}
    </li>
  </ul>
</div>

Events Available

Subscribe to drop event

constructor(private ngDragDropPlusService: NgDragDropPlusService) {
    this.ngDragDropPlusService.onDropSub.subscribe((event) => this.dropCourse(event));
  }

License