Drag and drop for angular 20.0+
npm install angular-draggable-droppable




https://mattlewis92.github.io/angular-draggable-droppable/
- About
- Installation
- Documentation
- Development
- License
Observable powered drag and drop for angular 20.0+
Install through npm:
```
npm install angular-draggable-droppable
Then use it in your app like so:
`typescript
import { Component, NgModule } from '@angular/core';
import { DraggableDirective, DroppableDirective } from 'angular-draggable-droppable';
@Component({
selector: 'demo-app',
imports: [DraggableDirective, DroppableDirective],
template:
,
})
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:
- Angular CDK drag and drop
- angular-skyhook
- ng-drag-drop
Development
$3
- Install Node.js (>=24.5.0)
- Install pnpm:
corepack enable
- Install local dev dependencies: pnpm install while current directory is this repo$3
Run
pnpm start to start a development server on port 8000 with auto reload + tests.$3
Run
pnpm test to run tests once or pnpm test:watch to continually run tests.$3
`bash
pnpm release
``MIT