https://mattlewis92.github.io/angular-draggable-droppable/
Observable powered drag and drop for angular 12.0+
Install through npm:
npm install 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.
All documentation is auto-generated from the source and can be viewed here: https://mattlewis92.github.io/angular-draggable-droppable/docs/
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:
- Install Node.js and NPM (should come with)
- Install local dev dependencies:
npm install
while current directory is this repo
Run npm start
to start a development server on port 8000 with auto reload + tests.
Run npm test
to run tests once or npm run test:watch
to continually run tests.
npm run release
MIT