node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

angular-draggable-droppable

angular 4.0+ drag and drop

Build Status codecov npm version devDependency Status GitHub issues GitHub stars GitHub license

Sponsor

Demo

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

Table of contents

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