drag-drop-view v0.0.21
drag-drop-view
This project provides some directives to help UI implementations with drag and drop.
Installation
To install this package, run:
$ npm install drag-drop-view --save
and then from your Angular Aplication:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import drag and drop view module
import { DragAndDropViewModule} from 'drag-drop-view';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Add DragAndDropViewModule
DragAndDropViewModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once the modulo is imported, you can use directives to drag and drop your layout.
Available directives
DragAndDropChildrenDirective
This directive provides drag-and-drop functionality inside a html element.
How to use
Add directive to your element and pass your list to directive
<div drag-and-drop-children [list]="fields">
<div *ngFor="let field of fields">
{{field.name}}
</div>
</div>
It's possible to ignore some children elements to don't allow drag and drop, for that you need:
<div drag-and-drop-children [list]="fields" ignoreClass="ignore">
<div *ngFor="let field of fields" [ngClass]="{'ignore': item.key == 2}">
{{field.name}}
</div>
</div>
DragAndDropToDirective
This directive provides drag-and-drop between two html elements.
How to use
Add directive to your element and pass your list to directive
<div>
<div class="edit-layout-list"
[drag-and-drop-to]="connectTo"
[list]="todoData"
(change)="print($event)">
<div class="edit-layout-box" *ngFor="let item of fieldsMulti1">
{{item.key}} - {{item.name}}
</div>
</div>
<div #done class="edit-layout-list" >
<div class="edit-layout-box" *ngFor="let item of doneData">
{{item.key}} - {{item.name}}
</div>
</div>
</div>
Typescript
...
doneList: any[] = [{key:0, name:'Task 1: Build component'},
{key:1, 'Task 1: Build directive to'}]
@ViewChild('done', { read: ViewContainerRef, static: false })
public done: ViewContainerRef;
private connectTo: DragAndDropConnectTo;
...
this.connectTo = {
data : this.doneList,
viewElement : this.done
}
...
License
MIT © # mfdiaspinto
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago