Have ideas to improve npm?Join in the discussion! »

    angular-draggable-droppable
    TypeScript icon, indicating that this package has built-in type declarations

    4.6.0 • 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

    77,612

    Version

    4.6.0

    License

    MIT

    Unpacked Size

    860 kB

    Total Files

    37

    Last publish

    Collaborators

    • avatar