npm

Need private packages and team management tools?Check out npm Orgs. »

angular-draggable-droppable

4.3.8 • Public • Published

angular 6.0+ drag and drop

Sponsorship Build Status codecov npm version Twitter Follow

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);
  }
}

Note: if draggable elements are inside a scrollable element then you will need to add mwlDraggableScrollContainer as an attribute to the scrollable container.

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

40,665

version

4.3.8

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability