angular 6.0+ drag and drop
Demo
https://mattlewis92.github.io/angular-draggable-droppable/demo/
Table of contents
About
Observable powered drag and drop for angular 6.0+
Installation
Install through npm:
npm install --save angular-draggable-droppable
Then use it in your app like so:
import { Component, NgModule } from '@angular/core';
import { DragAndDropModule } from 'angular-draggable-droppable';
@NgModule({
declarations: [DemoApp],
imports: [DragAndDropModule],
bootstrap: [DemoApp]
})
class DemoModule {}
@Component({
selector: 'demo-app',
template: `
<div mwlDraggable (dragEnd)="dragEnd($event)">Drag me!</div>
<div
mwlDroppable
(drop)="this.droppedData = $event.dropData">
<span [hidden]="droppedData">Drop here</span>
<span [hidden]="!droppedData">Item dropped here with data: "{{ droppedData }}"!</span>
</div>
`
})
class DemoApp {
droppedData: string;
dragEnd(event) {
console.log('Element was dragged', event);
}
}
You may also find it useful to view the demo source.
Documentation
All documentation is auto-generated from the source and can be viewed here: https://mattlewis92.github.io/angular-draggable-droppable/docs/
Development
Prepare your environment
- Install Node.js and NPM (should come with)
- Install local dev dependencies:
npm install
while current directory is this repo
Development server
Run npm start
to start a development server on port 8000 with auto reload + tests.
Testing
Run npm test
to run tests once or npm run test:watch
to continually run tests.
Release
npm run release
License
MIT