{"id":15019457,"url":"https://github.com/envyn/ngx-dragdrop","last_synced_at":"2026-02-07T14:33:04.979Z","repository":{"id":18026673,"uuid":"83192890","full_name":"envyN/ngx-dragdrop","owner":"envyN","description":"Minimial Angular 2.0+ module for drag and drop","archived":false,"fork":false,"pushed_at":"2023-05-31T07:19:19.000Z","size":4111,"stargazers_count":1,"open_issues_count":20,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-08T18:57:33.823Z","etag":null,"topics":["angular","angular2","angular4","angular5","angular6","angular6-library","drag","drop"],"latest_commit_sha":null,"homepage":"https://envyn.github.io/ngx-dragdrop/","language":"TypeScript","has_issues":true,"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/envyN.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2017-02-26T08:04:43.000Z","updated_at":"2023-05-30T15:16:37.000Z","dependencies_parsed_at":"2025-02-09T14:32:38.039Z","dependency_job_id":"275cbd52-d07d-410f-a147-c87f152c0875","html_url":"https://github.com/envyN/ngx-dragdrop","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/envyN/ngx-dragdrop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envyN%2Fngx-dragdrop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envyN%2Fngx-dragdrop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envyN%2Fngx-dragdrop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envyN%2Fngx-dragdrop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/envyN","download_url":"https://codeload.github.com/envyN/ngx-dragdrop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envyN%2Fngx-dragdrop/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260328949,"owners_count":22992798,"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","angular2","angular4","angular5","angular6","angular6-library","drag","drop"],"created_at":"2024-09-24T19:53:30.675Z","updated_at":"2026-02-07T14:33:04.940Z","avatar_url":"https://github.com/envyN.png","language":"TypeScript","readme":"# ngx-dragdrop\n\nA minimal angular 2.0+ module library for Drag and Drop using native HTML5 Drag and Drop.\n\n#### Demo: https://envyn.github.io/ngx-dragdrop/\n\n## Installation\nInstall with [npm](http://www.npmjs.com/):\n\n```sh\n$ npm install ngx-dragdrop\n```\nNote: For angular 4-5 projects, use ngx-dragdrop@^1.0.1\n```sh\n$ npm install ngx-dragdrop@^1.0.1\n```\n\nAdd the ngx-dragdrop module as a dependency to your application module:\n\n```\nimport { NgxDragDropModule } from 'ngx-dragdrop';\n\n@NgModule({\n  declarations: [\n    ...\n  ],\n  imports: [\n    ...\n    NgxDragDropModule,\n    ...\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Usage\n#### Minimal Example\n```html\n\u003cdiv [ngxDraggable]=\"true\"\n    [ngxDraggedClass]=\"'draggedClass'\" \n    [ngxDragTag]=\"'dragType1'\"\n    [ngxDragData]=\"{a:4,b:6}\"\u003e\n\u003c/div\u003e\n\u003cdiv (ngxDroppable)=\"onDrop($event)\"\n    [ngxDropData]=\"{dropObjectName:'foo'}\"\n    [ngxDropTags]=\"['dragType1','dragType2']\"\u003e\n\u003c/div\u003e\n```\n```\nonDrop(event:IOnDropData}){\n    \n}\n```\n\n\n### Drag API\n#### `ngx-draggable`\n```html\n\u003cdiv [ngxDraggable]=\"true\"\u003e\n```\nIf `ngxDraggable` is true, users will be able to drag the node/element.\n\n\n#### `ngxDraggedClass`\n```html\n\u003cdiv [ngxDraggable]=\"true\" ngxDraggedClass=\"draggedCls\"\u003e\n```\n`ngxDraggedClass` allows you to add a class(draggedCls) when the drag on the element starts.\nThe class is removed from the node on dragend.\n\n#### `ngxDragTag`\n```html\n\u003cdiv [ngxDraggable]=\"true\" ngxDragTag=\"dragType1\"\u003e\n```\n`ngxDragTag` allows you to categorise elements into different drag types.\nA node of dragType 'foo' will only be droppable inside a node which has 'foo' in its `ngxDropTags`\n\n#### `ngx-dragData`\n```html\n\u003cdiv [ngxDraggable]=\"true\" [ngxDragData]=\"{a:4,b:6}\"\u003e\n```\n`ngxDragData` allows you to attach data to the draggable node.\n\u003eThe data associated to `ngxDragData` would be serialised while dragStar and put into the HTML5 dataTransfer object.\n\n### Drop API\n#### `ngxDroppable`\n```html\n\u003cdiv (ngxDroppable)=\"onDrop($event)\"\u003e\n```\nif `ngxDroppable` is present, dragged elements can be dropped on them.\nIf an `ngxDragTag` is present on the dragged node, the same should be present in the `ngxDropTags` array for drag to be allowed\n\n#### `ngxDropTags`\n```html\n\u003cdiv (ngxDroppable)=\"onDrop($event)\" [ngxDropTags]=\"['foo','bar','dragType1', 'dragType3']\"\u003e\n```\n`ngxDropTags` allows you to determine all the dragTag types that are allowed to be dropped on this node.\nThis expects an array of strings\n\n#### `ngxDropData`\n```html\n\u003cdiv (ngxDroppable)=\"onDrop($event)\" [ngxDropData]=\"{a:4,b:6}\"\u003e\n```\n`ngxDropData` allows you to attach data to the droppable node.\n\n#### Drop Event Object Interface\nThe object that is passed to the dropHandler defined as the value for (ngxDroppable) is of type `IOnDropData` with following keys:\n ``dragTag, dragData, dropData``\n \u003eSince the directives use HTML dataTransfer Object, the `ngxDragData` is a copy(deserialized event dataTransfer object) of the original object, it is recommended that only uniquely identifying data for the dragged nodes be passed into `ngxDragData` and the original object if needed, be retrieved using this information.\n\n## Contribute\n* Fork the repo\n* get your local git clone of the repo fork using `git clone ...`\n* Run `yarn install --pure-lockfile`\n* Run `yarn build-lib:w` to build the library locally and watch for changes\n* Run `yarn start` (You should have your local app running at http://localhost:4200)\n* Make fixes/changes\n* Commit and push to fork\n* Send pull request from GitHub\n\n## License\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenvyn%2Fngx-dragdrop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenvyn%2Fngx-dragdrop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenvyn%2Fngx-dragdrop/lists"}