https://github.com/mattlewis92/angular-draggable-droppable
Observable powered drag and drop for angular 15.0+
https://github.com/mattlewis92/angular-draggable-droppable
angular drag-and-drop
Last synced: 12 months ago
JSON representation
Observable powered drag and drop for angular 15.0+
- Host: GitHub
- URL: https://github.com/mattlewis92/angular-draggable-droppable
- Owner: mattlewis92
- License: mit
- Created: 2016-11-18T14:42:10.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2024-02-28T17:58:24.000Z (about 2 years ago)
- Last Synced: 2025-03-19T20:45:46.051Z (about 1 year ago)
- Topics: angular, drag-and-drop
- Language: TypeScript
- Homepage: https://mattlewis92.github.io/angular-draggable-droppable/
- Size: 16.4 MB
- Stars: 135
- Watchers: 9
- Forks: 51
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# angular 15.0+ drag and drop
[](https://github.com/users/mattlewis92/sponsorship)
[](https://github.com/mattlewis92/angular-draggable-droppable/actions/workflows/ci.yml)
[](https://codecov.io/gh/mattlewis92/angular-draggable-droppable)
[](http://badge.fury.io/js/angular-draggable-droppable)
[](https://twitter.com/mattlewis92_)
## Demo
https://mattlewis92.github.io/angular-draggable-droppable/
## Table of contents
- [About](#about)
- [Installation](#installation)
- [Documentation](#documentation)
- [Development](#development)
- [License](#licence)
## About
Observable powered drag and drop for angular 15.0+
## Installation
Install through npm:
```
npm install angular-draggable-droppable
```
Then use it in your app like so:
```typescript
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: `
Drag me!
Drop here
Item dropped here with data: "{{ droppedData }}"!
`,
})
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](https://github.com/mattlewis92/angular-draggable-droppable/tree/main/src/demo).
## 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](https://material.angular.io/cdk/drag-drop/overview)
- [angular-skyhook](https://github.com/cormacrelf/angular-skyhook)
- [ng-drag-drop](https://github.com/ObaidUrRehman/ng-drag-drop)
## Development
### Prepare your environment
- Install [Node.js (>=14.19.0 or >=16.9.0)](http://nodejs.org/)
- Install pnpm: `corepack enable`
- Install local dev dependencies: `pnpm install` while current directory is this repo
### Development server
Run `pnpm start` to start a development server on port 8000 with auto reload + tests.
### Testing
Run `pnpm test` to run tests once or `pnpm test:watch` to continually run tests.
### Release
```bash
pnpm release
```
## License
MIT