Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

angular-draggable-droppable

4.0.2 • Public • Published

angular 6.0+ drag and drop

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

Demo

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

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/

Alternatives

I wrote this library because I needed drag and drop whilst snapping to a grid. If you don't need this feature then I recommend checking out one of these other awesome drag and drop libraries:

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

install

npm i angular-draggable-droppable

Downloadsweekly downloads

27,980

version

4.0.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability