{"id":21935980,"url":"https://github.com/mattlewis92/angular-draggable-droppable","last_synced_at":"2025-04-04T07:08:50.765Z","repository":{"id":13296381,"uuid":"74137880","full_name":"mattlewis92/angular-draggable-droppable","owner":"mattlewis92","description":"Observable powered drag and drop for angular 15.0+","archived":false,"fork":false,"pushed_at":"2024-02-28T17:58:24.000Z","size":17152,"stargazers_count":135,"open_issues_count":0,"forks_count":51,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-03-19T20:45:46.051Z","etag":null,"topics":["angular","drag-and-drop"],"latest_commit_sha":null,"homepage":"https://mattlewis92.github.io/angular-draggable-droppable/","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mattlewis92.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"mattlewis92","custom":"https://www.paypal.me/mattlewis92"}},"created_at":"2016-11-18T14:42:10.000Z","updated_at":"2025-02-01T14:53:04.000Z","dependencies_parsed_at":"2024-06-18T12:36:52.681Z","dependency_job_id":"2bb73b7e-b0c5-4218-ba72-74495db11d9b","html_url":"https://github.com/mattlewis92/angular-draggable-droppable","commit_stats":{"total_commits":386,"total_committers":12,"mean_commits":"32.166666666666664","dds":0.4585492227979274,"last_synced_commit":"a75a077ec4ed394e008e72c4e1633a914f0e2a13"},"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlewis92%2Fangular-draggable-droppable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlewis92%2Fangular-draggable-droppable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlewis92%2Fangular-draggable-droppable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlewis92%2Fangular-draggable-droppable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattlewis92","download_url":"https://codeload.github.com/mattlewis92/angular-draggable-droppable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245090872,"owners_count":20559298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","drag-and-drop"],"created_at":"2024-11-29T01:12:42.878Z","updated_at":"2025-03-28T06:09:24.996Z","avatar_url":"https://github.com/mattlewis92.png","language":"TypeScript","readme":"# angular 15.0+ drag and drop\n\n[![Sponsorship](https://img.shields.io/badge/funding-github-%23EA4AAA)](https://github.com/users/mattlewis92/sponsorship)\n[![Build Status](https://github.com/mattlewis92/angular-draggable-droppable/actions/workflows/ci.yml/badge.svg)](https://github.com/mattlewis92/angular-draggable-droppable/actions/workflows/ci.yml)\n[![codecov](https://codecov.io/gh/mattlewis92/angular-draggable-droppable/branch/main/graph/badge.svg)](https://codecov.io/gh/mattlewis92/angular-draggable-droppable)\n[![npm version](https://badge.fury.io/js/angular-draggable-droppable.svg)](http://badge.fury.io/js/angular-draggable-droppable)\n[![Twitter Follow](https://img.shields.io/twitter/follow/mattlewis92_.svg)](https://twitter.com/mattlewis92_)\n\n## Demo\n\nhttps://mattlewis92.github.io/angular-draggable-droppable/\n\n## Table of contents\n\n- [About](#about)\n- [Installation](#installation)\n- [Documentation](#documentation)\n- [Development](#development)\n- [License](#licence)\n\n## About\n\nObservable powered drag and drop for angular 15.0+\n\n## Installation\n\nInstall through npm:\n\n```\nnpm install angular-draggable-droppable\n```\n\nThen use it in your app like so:\n\n```typescript\nimport { Component, NgModule } from '@angular/core';\nimport { DragAndDropModule } from 'angular-draggable-droppable';\n\n@NgModule({\n  declarations: [DemoApp],\n  imports: [DragAndDropModule],\n  bootstrap: [DemoApp],\n})\nclass DemoModule {}\n\n@Component({\n  selector: 'demo-app',\n  template: `\n    \u003cdiv mwlDraggable (dragEnd)=\"dragEnd($event)\"\u003eDrag me!\u003c/div\u003e\n    \u003cdiv mwlDroppable (drop)=\"this.droppedData = $event.dropData\"\u003e\n      \u003cspan [hidden]=\"droppedData\"\u003eDrop here\u003c/span\u003e\n      \u003cspan [hidden]=\"!droppedData\"\n        \u003eItem dropped here with data: \"{{ droppedData }}\"!\u003c/span\n      \u003e\n    \u003c/div\u003e\n  `,\n})\nclass DemoApp {\n  droppedData: string;\n\n  dragEnd(event) {\n    console.log('Element was dragged', event);\n  }\n}\n```\n\nNote: if draggable elements are inside a scrollable element then you will need to add `mwlDraggableScrollContainer` as an attribute to the scrollable container.\n\nYou may also find it useful to view the [demo source](https://github.com/mattlewis92/angular-draggable-droppable/tree/main/src/demo).\n\n## Documentation\n\nAll documentation is auto-generated from the source and can be viewed here:\nhttps://mattlewis92.github.io/angular-draggable-droppable/docs/\n\n## Alternatives\n\nI 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:\n\n- [Angular CDK drag and drop](https://material.angular.io/cdk/drag-drop/overview)\n- [angular-skyhook](https://github.com/cormacrelf/angular-skyhook)\n- [ng-drag-drop](https://github.com/ObaidUrRehman/ng-drag-drop)\n\n## Development\n\n### Prepare your environment\n\n- Install [Node.js (\u003e=14.19.0 or \u003e=16.9.0)](http://nodejs.org/)\n- Install pnpm: `corepack enable`\n- Install local dev dependencies: `pnpm install` while current directory is this repo\n\n### Development server\n\nRun `pnpm start` to start a development server on port 8000 with auto reload + tests.\n\n### Testing\n\nRun `pnpm test` to run tests once or `pnpm test:watch` to continually run tests.\n\n### Release\n\n```bash\npnpm release\n```\n\n## License\n\nMIT\n","funding_links":["https://github.com/sponsors/mattlewis92","https://www.paypal.me/mattlewis92"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattlewis92%2Fangular-draggable-droppable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattlewis92%2Fangular-draggable-droppable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattlewis92%2Fangular-draggable-droppable/lists"}