Package Exports

angular-draggable-droppable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-draggable-droppable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

angular 4.0+ drag and drop

Demo

https://mattlewis92.github.io/angular-draggable-droppable/demo/

About
Installation
Documentation
Development
License

About

Observable powered drag and drop for angular 4.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.forRoot()],
  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.

Usage without a module bundler

<script src="node_modules/dist/umd/angular-draggable-droppable/angular-draggable-droppable.js"></script>
<script>
    // everything is exported angularDraggableDroppable namespace
</script>

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

angular-draggable-droppable