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
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: 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