1.0.1 • Published 5 years ago
ng-drag-drop-plus v1.0.1
NgDragDropPlus
Table of contents:
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
Licensed under MIT