{"id":15825234,"url":"https://github.com/ks89/ngx-drag-n-drop","last_synced_at":"2025-05-12T19:59:49.974Z","repository":{"id":35032571,"uuid":"194560047","full_name":"Ks89/ngx-drag-n-drop","owner":"Ks89","description":"Angular library to enable drag and drop features","archived":false,"fork":false,"pushed_at":"2024-05-31T18:59:36.000Z","size":2354,"stargazers_count":2,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-12T09:33:46.544Z","etag":null,"topics":["angular","angular8","aot","dnd","drag","drag-and-drop","drop","library"],"latest_commit_sha":null,"homepage":null,"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/Ks89.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":["Ks89"]}},"created_at":"2019-06-30T20:49:18.000Z","updated_at":"2024-05-31T18:56:50.000Z","dependencies_parsed_at":"2024-10-26T14:02:53.646Z","dependency_job_id":"5a4e5579-a1b0-4adc-ba01-4d0f9e4450dc","html_url":"https://github.com/Ks89/ngx-drag-n-drop","commit_stats":{"total_commits":60,"total_committers":1,"mean_commits":60.0,"dds":0.0,"last_synced_commit":"7bd13c78fb817183f969b2b49487b3876496a5a0"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ks89%2Fngx-drag-n-drop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ks89%2Fngx-drag-n-drop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ks89%2Fngx-drag-n-drop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ks89%2Fngx-drag-n-drop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ks89","download_url":"https://codeload.github.com/Ks89/ngx-drag-n-drop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253814720,"owners_count":21968555,"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","angular8","aot","dnd","drag","drag-and-drop","drop","library"],"created_at":"2024-10-05T09:06:18.028Z","updated_at":"2025-05-12T19:59:49.922Z","avatar_url":"https://github.com/Ks89.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Ks89"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e@ks89/ngx-drag-n-drop\u003c/h1\u003e\n\n\u003ch3 align=\"center\"\u003e\u003cb\u003e@ks89/ngx-drag-n-drop\u003c/b\u003e is an Angular library to add drag and drop features\u003c/h3\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n  Based on \u003ca href=\"https://bitbucket.org/IpponMattRitter/angular4-drag-drop\"\u003eangular4-drag-drop\u003c/a\u003e, but with support for Angular \u003e=7 and other improvements.\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@ks89/ngx-drag-n-drop\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@ks89/ngx-drag-n-drop.svg?style=flat-square\" alt=\"npm@latest\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@ks89/ngx-drag-n-drop\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/@ks89/ngx-drag-n-drop/beta.svg?style=flat-square\" alt=\"npm@beta\"\u003e\n    \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@ks89/ngx-drag-n-drop\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@ks89/ngx-drag-n-drop/next.svg?style=flat-square\" alt=\"npm@next\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@ks89/ngx-drag-n-drop\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/@ks89/ngx-drag-n-drop.svg?style=flat-square\" alt=\"Downloads/week\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@ks89/ngx-drag-n-drop\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@ks89/ngx-drag-n-drop.svg?style=flat-square\" alt=\"Downloads/month\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@ks89/ngx-drag-n-drop\"\u003e\u003cimg src=\"https://img.shields.io/npm/dy/@ks89/ngx-drag-n-drop.svg?style=flat-square\" alt=\"Downloads/year\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://snyk.io/test/github/ks89/ngx-drag-n-drop\"\u003e\u003cimg src=\"https://snyk.io/test/github/ks89/ngx-drag-n-drop/badge.svg\" alt=\"Known Vulnerabilities\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/Ks89/ngx-drag-n-drop\"\u003e\u003cimg src=\"https://david-dm.org/Ks89/ngx-drag-n-drop.svg\" alt=\"david-dm Dependencies\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\u003cimg src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\" alt=\"code style: prettier\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://stackblitz.com/edit/ngx-drag-n-drop\"\u003e\u003cimg src=\"https://img.shields.io/badge/stackblitz-available-orange.svg\" alt=\"Stackblitz\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@ks89/ngx-drag-n-drop\"\u003e\u003cimg src=\"https://img.shields.io/badge/angular--style--guide-compliant-brightgreen.svg\" alt=\"AngularStyleGuide\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@ks89/ngx-drag-n-drop\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@ks89/ngx-drag-n-drop.svg?style=flat-square\" alt=\"NPMLicense\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://semver.org/\"\u003e\u003cimg src=\"https://img.shields.io/badge/semver-2.0-ff69b4.svg?style=flat-square\" alt=\"Semver\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch5 align=\"center\"\u003e\n\u003cb\u003eDo you like @ks89/ngx-drag-n-drop? Please, add a :star: to support this library\u003c/b\u003e\n\u003c/h5\u003e\n\n\u003cbr\u003e\n\n## Table of Contents\n\n1. **[Features](#boom-features-boom)**\n2. **[Installation](#package-installation-package)**\n3. **[Choose the version](#warning-choose-the-version-warning)**\n4. **[Usage](#usage)**\n5. **[News](#fire-news-fire)**\n6. **[Contributing](#computer-contributing-computer)**\n7. **[License](#copyright-license-copyright)**\n\n\u003cbr\u003e\n\n## :boom: Features :boom:\n- Angular Module to import this library\n- supports all **recommended Angular Compiler Options**\n- compliant to Angular Package Format specifications\n- **use [Semantic versioning 2.0.0](http://semver.org/)** also known as 'semver'\n- official example with `angular-cli`\n\n\u003cbr\u003e\n\n## :package: Installation :package:\n\n- `npm install --save @ks89/ngx-drag-n-drop`\n\n\u003cbr\u003e\n\n## :warning: Choose the right version :warning:\n\n|            |   @ks89/ngx-drag-n-drop   |\n|------------|:-------------------------:|\n| AngularJS  |        NOT WORKING        |\n| Angular 2  | NOT OFFICIALLY SUPPORTED  |\n| Angular 4  | NOT OFFICIALLY SUPPORTED  |\n| Angular 5  | NOT OFFICIALLY SUPPORTED  |\n| Angular 6  | NOT OFFICIALLY SUPPORTED  |\n| Angular 7  | \u0026gt;= 1.0.0 and \u0026lt;2.0.0 |\n| Angular 8  | \u0026gt;= 1.0.0 and \u0026lt;2.0.0 |\n| Angular 9  | \u0026gt;= 2.0.0 and \u0026lt;3.0.0 |\n| Angular 10 | \u0026gt;= 3.0.0 and \u0026lt;4.0.0 |\n| Angular 11 | \u0026gt;= 3.0.0 and \u0026lt;4.0.0 |\n| Angular 12 |        \u0026gt;= 4.0.0        |\n| Angular 13 |        \u0026gt;= 5.0.0        |\n| Angular 14 |        \u0026gt;= 5.0.0        |\n| Angular 15 |        \u0026gt;= 6.0.1        |\n| Angular 16 |        \u0026gt;= 7.0.0        |\n| Angular 17 |        \u0026gt;= 7.0.0        |\n| Angular 18 |        \u0026gt;= 8.0.0        |\n\n\u003cbr\u003e\n\n\n## Usage\nTo import the module into a module in which you wish to use the directive on components.\n```\nimport { DragDropDirectiveModule} from \"@ks89/ngx-drag-n-drop\";\n\n```\nThis module exports two attribute directives, 'DragDirective' and 'DropDirective'.  DragDirectve is used with a component from which you want to drag items, while DropDirective is used with the component in which you wish to drop items.  \n\nBoth accept inputs for CSS class highlighting. If you do not pass a string then highlighting will be ignored.  Both will emit the dragged item when it is dropped in the 'DroppableDirective' component or element.\n\n'DragDirective' emits an event when dragging is started.\n\n'DropDirective' emits events when a drag enters a drop element, leaves a drop element, and as stated above when an element is dropped.\n\n### DragDirective\n```typescript\n\u003cdiv *ngFor=\"let item of itemsToDrop\" ksDragDirective [draggedItem]='item' [dragHightlight]=\"'highlight'\" (releaseDrop)=\"releaseDrop($event)\" (startDrag)=\"startDrag(item)\"\u003e\n\u003c/div\u003e\n```\n'[draggedItem]=\"item\"' Applies the drag directive, and passes it an item.\n\n'[dragHighlight]=\"'highlight'\"' Passes a string to add a css class to the css class list of the element.\n\n'(releaseDrop)=\"releaseDrop($event)\"' Calls a function to act on the dragged item once it is dropped into the drop area.\n\n'(startDrag)=\"startDrag(item)\" Calls a function when the user starts dragging the item. \n\n### DropDirectve\n```typescript\n\u003cdiv ksDropDirective (dropEvent)=\"addDropItem($event)\" (dropEventMouse)=\"dropEventMouse($event) (dragenterEvent)=\"dragEnter($event)\" (dragleaveEvent)=\"dragLeave()\" class=\"droppable\" [dropHighlight]=\"'highlight'\" \u003e\n\u003c/div\u003e\n```\n'ksDropDirective' applies the directive to an element, making it a drop target.\n'[dropHighlight]=\"'highlight'\"' passes a string to add a css class to the css class list of the element.  \n\n'(dropEvent)=\"addDropItem($event)\"' calls a function and passes the dropped item when an item is dropped into the drop element.\n\n'(dropEventMouse)=\"dropEventMouse($event)\"'.  dropEventMouse is emitting the html drop event. From this you can get x,y cordinates of the drop etc.  If you wish you can use this to get the dropped item as well: let droppedObject = JSON.parse(event.dataTransfer.getData('text')).  \n\n'(dragenterEvent)=\"dragEnter($event)\"' calls a function and passes the dragged item when an item is dragged into the drop element.\n\n'(dragleaveEvent)=\"dragLeave($event)\"' calls a function and passes the dragged item when the item is dragged out of the drop element.\n\n\n## :fire: News :fire:\n\n- 31/05/2024 - 8.0.0 - @ks89/ngx-drag-n-drop - [HERE](https://github.com/Ks89/ngx-drag-n-drop/releases)\n- 16/08/2023 - 7.0.1 - @ks89/ngx-drag-n-drop - [HERE](https://github.com/Ks89/ngx-drag-n-drop/releases)\n- 17/11/2022 - 6.0.1 - @ks89/ngx-drag-n-drop - [HERE](https://github.com/Ks89/ngx-drag-n-drop/releases)\n- 11/04/2021 - 5.0.0 - @ks89/ngx-drag-n-drop - [HERE](https://github.com/Ks89/ngx-drag-n-drop/releases)\n- 08/06/2021 - 4.0.0 - @ks89/ngx-drag-n-drop - [HERE](https://github.com/Ks89/ngx-drag-n-drop/releases)\n- 13/08/2019 - 3.0.0 - @ks89/ngx-drag-n-drop - [HERE](https://github.com/Ks89/ngx-drag-n-drop/releases)\n- 21/02/2019 - 2.0.0 - @ks89/ngx-drag-n-drop - [HERE](https://github.com/Ks89/ngx-drag-n-drop/releases)\n- 24/07/2019 - 1.0.1 - @ks89/ngx-drag-n-drop - [HERE](https://github.com/Ks89/ngx-drag-n-drop/releases)\n- 24/07/2019 - 1.0.0 - @ks89/ngx-drag-n-drop - [HERE](https://github.com/Ks89/ngx-drag-n-drop/releases)\n\n\u003cbr\u003e\n\n## :computer: Contributing :computer:\n\nCheck `CONTRIBUTING.md` in this repository.\nTo understand how to contribute to an open source project, [HERE](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) you can find useful information.\n\nWhen you create a pull request, please, format your code to be consistent with the existing code. I suggest to use [WebStorm](https://www.jetbrains.com/webstorm/) as IDE and when you commit don't use a third party software, but the official command line `git`.\nIn this way, [prettier](https://prettier.io/) will run using my configuration and it will auto-format the code. If it will fail, add files with `git add .` again and retry.\n\n\u003cbr\u003e\n\n## :copyright: License :copyright:\n\nThe MIT License (MIT)\n\nCopyright (c) 2019-2024 Stefano Cappa (Ks89)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n\u003cbr/\u003e\n\n**Created by Stefano Cappa**\n\n**[⬆ back to top](#table-of-contents)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fks89%2Fngx-drag-n-drop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fks89%2Fngx-drag-n-drop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fks89%2Fngx-drag-n-drop/lists"}