[ { "path": ".editorconfig", "content": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.ts]\nquote_type = single\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n" }, { "path": ".github/ISSUE_TEMPLATE/Bug_report.md", "content": "---\r\nname: Bug report\r\nabout: Create a report to help us improve\r\n\r\n---\r\n\r\n**Describe the bug**\r\nA clear and concise description of what the bug is.\r\n\r\n**To Reproduce**\r\nIf possible please provide a StackBlitz based on this template\r\nhttps://stackblitz.com/edit/ngx-drag-drop-issue-template\r\n\r\nSteps to reproduce the behavior:\r\n1. Go to '...'\r\n2. Click on '....'\r\n3. Scroll down to '....'\r\n4. See error\r\n\r\n**Expected behavior**\r\nA clear and concise description of what you expected to happen.\r\n\r\n**Screenshots**\r\nIf applicable, add screenshots to help explain your problem.\r\n\r\n**Desktop (please complete the following information):**\r\n - OS: [e.g. iOS]\r\n - Browser [e.g. chrome, safari]\r\n - Version [e.g. 22]\r\n\r\n**Smartphone (please complete the following information):**\r\n - Device: [e.g. iPhone6]\r\n - OS: [e.g. iOS8.1]\r\n - Browser [e.g. stock browser, safari]\r\n - Version [e.g. 22]\r\n\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n" }, { "path": ".github/ISSUE_TEMPLATE/Feature_request.md", "content": "---\r\nname: Feature request\r\nabout: Suggest an idea for this project\r\n\r\n---\r\n\r\n**Is your feature request related to a problem? Please describe.**\r\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\r\n\r\n**Describe the solution you'd like**\r\nA clear and concise description of what you want to happen.\r\n\r\n**Describe alternatives you've considered**\r\nA clear and concise description of any alternative solutions or features you've considered.\r\n\r\n**Additional context**\r\nAdd any other context or screenshots about the feature request here.\r\n" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\n\non:\n pull_request:\n branches: [master]\n\njobs:\n lint:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6\n - uses: pnpm/action-setup@71c92474e7e4f5bca283fb17ef80fba9cdb2b4b1 # v6\n - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6\n with:\n node-version: 24\n cache: pnpm\n - run: pnpm install --frozen-lockfile\n - run: pnpm exec prettier --check .\n\n test:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6\n - uses: pnpm/action-setup@71c92474e7e4f5bca283fb17ef80fba9cdb2b4b1 # v6\n - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6\n with:\n node-version: 24\n cache: pnpm\n - run: pnpm install --frozen-lockfile\n - run: pnpm run build:lib\n - name: Run tests with coverage\n run: |\n echo '## Test Coverage' >> $GITHUB_STEP_SUMMARY\n echo '' >> $GITHUB_STEP_SUMMARY\n pnpm run test:coverage 2>&1 | tee /dev/stderr | sed -n '/^-.*|/,/^-.*|$/p' >> $GITHUB_STEP_SUMMARY\n\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6\n - uses: pnpm/action-setup@71c92474e7e4f5bca283fb17ef80fba9cdb2b4b1 # v6\n - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6\n with:\n node-version: 24\n cache: pnpm\n - run: pnpm install --frozen-lockfile\n - run: pnpm run build:lib\n - run: pnpm run build:docs\n" }, { "path": ".github/workflows/deploy-pages.yml", "content": "name: Deploy Demo to GitHub Pages\n\non:\n push:\n branches: [master]\n workflow_dispatch:\n\npermissions:\n contents: read\n pages: write\n id-token: write\n\nconcurrency:\n group: pages\n cancel-in-progress: true\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6\n - uses: pnpm/action-setup@71c92474e7e4f5bca283fb17ef80fba9cdb2b4b1 # v6\n - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6\n with:\n node-version: 24\n cache: pnpm\n\n - run: pnpm install --frozen-lockfile\n - run: pnpm run build:lib\n - run: pnpm run build:docs\n - uses: actions/upload-pages-artifact@fc324d3547104276b827a68afc52ff2a11cc49c9 # v5\n with:\n path: docs\n\n deploy:\n needs: build\n runs-on: ubuntu-latest\n environment:\n name: github-pages\n url: ${{ steps.deployment.outputs.page_url }}\n steps:\n - id: deployment\n uses: actions/deploy-pages@cd2ce8fcbc39b97be8ca5fce6e763baed58fa128 # v5\n" }, { "path": ".github/workflows/publish.yml", "content": "name: Publish to npm\n\non:\n release:\n types: [published]\n\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6\n - uses: pnpm/action-setup@71c92474e7e4f5bca283fb17ef80fba9cdb2b4b1 # v6\n - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6\n with:\n node-version: 24\n cache: pnpm\n - run: pnpm install --frozen-lockfile\n - run: pnpm run build:lib\n - name: Run tests with coverage\n run: |\n echo '## Test Coverage' >> $GITHUB_STEP_SUMMARY\n echo '' >> $GITHUB_STEP_SUMMARY\n echo '```' >> $GITHUB_STEP_SUMMARY\n pnpm run test:coverage 2>&1 | tee /dev/stderr | sed -n '/^-.*|/,/^-.*|$/p' >> $GITHUB_STEP_SUMMARY\n echo '```' >> $GITHUB_STEP_SUMMARY\n\n publish:\n needs: test\n runs-on: ubuntu-latest\n permissions:\n contents: read\n id-token: write\n steps:\n - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6\n - uses: pnpm/action-setup@71c92474e7e4f5bca283fb17ef80fba9cdb2b4b1 # v6\n - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6\n with:\n node-version: 24\n cache: pnpm\n registry-url: https://registry.npmjs.org/\n - run: pnpm install --frozen-lockfile\n - run: pnpm run build:lib\n - run: pnpm publish ./dist/ngx-drag-drop --provenance --access public --no-git-checks\n" }, { "path": ".gitignore", "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/docs\n/tmp\n/out-tsc\n# Only exists if Bazel was run\n/bazel-out\n/.ng_build\n\n# dependencies\n/node_modules\n\n# profiling files\nchrome-profiler-events*.json\n\n# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.history/*\n\n# misc\n/.angular/cache\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\npnpm-debug.log\npackage-lock.json\nyarn-error.log\ntestem.log\n/typings\n\n# System Files\n.DS_Store\nThumbs.db\n\nnode_modules\n" }, { "path": ".prettierignore", "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/docs\n/tmp\n/out-tsc\n# Only exists if Bazel was run\n/bazel-out\n/.ng_build\n/.github\n\n# dependencies\n/node_modules\n\n# profiling files\nchrome-profiler-events*.json\n\n# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.history/*\n\n# misc\n/.angular/cache\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\npnpm-debug.log\npnpm-lock.yaml\nyarn-error.log\ntestem.log\n/typings\n\n# System Files\n.DS_Store\nThumbs.db\n\nnode_modules\n" }, { "path": ".prettierrc.json", "content": "{\n \"tabWidth\": 2,\n \"useTabs\": false,\n \"singleQuote\": true,\n \"semi\": true,\n \"bracketSpacing\": true,\n \"arrowParens\": \"avoid\",\n \"trailingComma\": \"es5\",\n \"bracketSameLine\": true,\n \"printWidth\": 80\n}\n" }, { "path": ".vscode/extensions.json", "content": "{\n // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846\n \"recommendations\": [\"angular.ng-template\"]\n}\n" }, { "path": ".vscode/launch.json", "content": "{\n // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"name\": \"ng serve\",\n \"type\": \"pwa-chrome\",\n \"request\": \"launch\",\n \"preLaunchTask\": \"npm: start\",\n \"url\": \"http://localhost:4200/\"\n },\n {\n \"name\": \"ng test\",\n \"type\": \"chrome\",\n \"request\": \"launch\",\n \"preLaunchTask\": \"npm: test\",\n \"url\": \"http://localhost:9876/debug.html\"\n }\n ]\n}\n" }, { "path": ".vscode/tasks.json", "content": "{\n // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558\n \"version\": \"2.0.0\",\n \"tasks\": [\n {\n \"type\": \"npm\",\n \"script\": \"start\",\n \"isBackground\": true,\n \"problemMatcher\": {\n \"owner\": \"typescript\",\n \"pattern\": \"$tsc\",\n \"background\": {\n \"activeOnStart\": true,\n \"beginsPattern\": {\n \"regexp\": \"(.*?)\"\n },\n \"endsPattern\": {\n \"regexp\": \"bundle generation complete\"\n }\n }\n }\n },\n {\n \"type\": \"npm\",\n \"script\": \"test\",\n \"isBackground\": true,\n \"problemMatcher\": {\n \"owner\": \"typescript\",\n \"pattern\": \"$tsc\",\n \"background\": {\n \"activeOnStart\": true,\n \"beginsPattern\": {\n \"regexp\": \"(.*?)\"\n },\n \"endsPattern\": {\n \"regexp\": \"bundle generation complete\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "LICENSE", "content": "BSD 3-Clause License\n\nCopyright (c) 2021, Stefan Steinhart\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without\nmodification, are permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n this list of conditions and the following disclaimer in the documentation\n and/or other materials provided with the distribution.\n\n* Neither the name of the copyright holder nor the names of its\n contributors may be used to endorse or promote products derived from\n this software without specific prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\nAND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\nIMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE\nFOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL\nDAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR\nSERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER\nCAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,\nOR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\nOF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n" }, { "path": "README.md", "content": "[![npm](https://img.shields.io/npm/v/ngx-drag-drop.svg)](https://www.npmjs.com/package/ngx-drag-drop)\n[![npm (next)](https://img.shields.io/npm/v/ngx-drag-drop/next.svg)](https://www.npmjs.com/package/ngx-drag-drop)\n[![NpmLicense](https://img.shields.io/npm/l/ngx-drag-drop.svg)](https://www.npmjs.com/package/ngx-drag-drop)\n[![GitHub issues](https://img.shields.io/github/issues/ChristofFritz/ngx-drag-drop.svg)](https://github.com/ChristofFritz/ngx-drag-drop/issues)\n[![Twitter](https://img.shields.io/twitter/url/https/github.com/ChristofFritz/ngx-drag-drop.svg?style=social)](https://twitter.com/intent/tweet?text=Angular%20drag%20and%20drop%20with%20ease:&url=https://github.com/ChristofFritz/ngx-drag-drop)\n\n# NgxDragDrop\n\n[_Demo_](https://christoffritz.github.io/ngx-drag-drop/) / [_StackBlitz Issue Template_](https://stackblitz.com/edit/ngx-drag-drop-issue-template)\n\n```sh\nnpm install ngx-drag-drop\n# or\npnpm add ngx-drag-drop\n```\n\n**Angular directives for declarative drag and drop using the HTML5 Drag-And-Drop API**\n\n- sortable lists by using placeholder element (vertical and horizontal)\n- nestable\n- dropzones optionally support external/native draggables (img, txt, file)\n- conditional drag/drop\n- typed drag/drop\n- utilize [EffectAllowed](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed)\n- custom CSS classes\n- touch support by using a [polyfill](#touch-support)\n- [AOT](https://angular.io/guide/aot-compiler) compatible\n\nPort of [angular-drag-drop-lists](https://github.com/marceljuenemann/angular-drag-and-drop-lists) but without the lists :wink:\n\nThis has `dropzones` though :+1:\nThe idea is that the directive does not handle lists internally so the `dndDropzone` can be general purpose.\n\n## Angular Version Compatibility\n\nStarting with v13, the library major version matches the Angular major version.\n\n| Angular | ngx-drag-drop |\n| ------- | ------------- |\n| 21.x | 21.x |\n| 20.x | 20.x |\n| 19.x | 19.x |\n| 18.x | 18.x |\n| 17.x | 17.x |\n| 16.x | 16.x |\n| 15.x | 15.x |\n| 14.x | 14.x |\n| 13.x | 13.x |\n\nFor older Angular versions (v4–v12), use ngx-drag-drop v2.x.\n\n## Usage\n\n`app.component.html`\n\n```HTML\n\n
\n\n \n
HANDLE\n
\n\n draggable ({{draggable.effectAllowed}}) DISABLED\n\n \n
DRAG_IMAGE
\n\n
\n\n\n\n
\n\n dropzone\n\n \n \n
\n placeholder\n
\n\n
\n```\n\n`app.component`\n\n```JS\nimport { Component } from '@angular/core';\n\nimport { DndDropEvent } from 'ngx-drag-drop';\n\n@Component()\nexport class AppComponent {\n\n draggable = {\n // note that data is handled with JSON.stringify/JSON.parse\n // only set simple data or POJO's as methods will be lost\n data: \"myDragData\",\n effectAllowed: \"all\",\n disable: false,\n handle: false\n };\n\n onDragStart(event:DragEvent) {\n\n console.log(\"drag started\", JSON.stringify(event, null, 2));\n }\n\n onDragEnd(event:DragEvent) {\n\n console.log(\"drag ended\", JSON.stringify(event, null, 2));\n }\n\n onDraggableCopied(event:DragEvent) {\n\n console.log(\"draggable copied\", JSON.stringify(event, null, 2));\n }\n\n onDraggableLinked(event:DragEvent) {\n\n console.log(\"draggable linked\", JSON.stringify(event, null, 2));\n }\n\n onDraggableMoved(event:DragEvent) {\n\n console.log(\"draggable moved\", JSON.stringify(event, null, 2));\n }\n\n onDragCanceled(event:DragEvent) {\n\n console.log(\"drag cancelled\", JSON.stringify(event, null, 2));\n }\n\n onDragover(event:DragEvent) {\n\n console.log(\"dragover\", JSON.stringify(event, null, 2));\n }\n\n onDrop(event:DndDropEvent) {\n\n console.log(\"dropped\", JSON.stringify(event, null, 2));\n }\n}\n```\n\n`app.module`\n\n```JS\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { DndModule } from 'ngx-drag-drop';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n DndModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n## API\n\n```TS\n// https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect\nexport type DropEffect = \"move\" | \"copy\" | \"link\" | \"none\";\n\n// https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed\nexport type EffectAllowed = DropEffect | \"copyMove\" | \"copyLink\" | \"linkMove\" | \"all\";\n```\n\n```TS\nexport type DndDragImageOffsetFunction = ( event:DragEvent, dragImage:Element ) => { x:number, y:number };\n\n@Directive( {\n selector: \"[dndDraggable]\"\n} )\nexport declare class DndDraggableDirective {\n\n // the data attached to the drag\n dndDraggable: any;\n\n // the allowed drop effect\n dndEffectAllowed: EffectAllowed;\n\n // optionally set the type of dragged data to restrict dropping on compatible dropzones\n dndType?: string;\n\n // conditionally disable the draggability\n dndDisableIf: boolean;\n dndDisableDragIf: boolean;\n\n // set a custom class that is applied while dragging\n dndDraggingClass: string = \"dndDragging\";\n\n // set a custom class that is applied to only the src element while dragging\n dndDraggingSourceClass: string = \"dndDraggingSource\";\n\n // set the class that is applied when draggable is disabled by [dndDisableIf]\n dndDraggableDisabledClass = \"dndDraggableDisabled\";\n\n // enables to set a function for calculating custom dragimage offset\n dndDragImageOffsetFunction:DndDragImageOffsetFunction = calculateDragImageOffset;\n\n // emits on drag start\n readonly dndStart: EventEmitter;\n\n // emits on drag\n readonly dndDrag: EventEmitter;\n\n // emits on drag end\n readonly dndEnd: EventEmitter;\n\n // emits when the dragged item has been dropped with effect \"move\"\n readonly dndMoved: EventEmitter;\n\n // emits when the dragged item has been dropped with effect \"copy\"\n readonly dndCopied: EventEmitter;\n\n // emits when the dragged item has been dropped with effect \"link\"\n readonly dndLinked: EventEmitter;\n\n // emits when the drag is canceled\n readonly dndCanceled: EventEmitter;\n}\n```\n\n```TS\nexport interface DndDropEvent {\n\n // the original drag event\n event: DragEvent;\n\n // the actual drop effect\n dropEffect: DropEffect;\n\n // true if the drag did not origin from a [dndDraggable]\n isExternal:boolean;\n\n // the data set on the [dndDraggable] that started the drag\n // for external drags use the event property which contains the original drop event as this will be undefined\n data?: any;\n\n // the index where the draggable was dropped in a dropzone\n // set only when using a placeholder\n index?: number;\n\n // if the dndType input on dndDraggable was set\n // it will be transported here\n type?: any;\n}\n\n@Directive( {\n selector: \"[dndDropzone]\"\n} )\nexport declare class DndDropzoneDirective {\n\n // optionally restrict the allowed types\n dndDropzone?: string[];\n\n // set the allowed drop effect\n dndEffectAllowed: EffectAllowed;\n\n // conditionally disable the dropzone\n dndDisableIf: boolean;\n dndDisableDropIf: boolean;\n\n // if draggables that are not [dndDraggable] are allowed to be dropped\n // set to true if dragged text, images or files should be handled\n dndAllowExternal: boolean;\n\n // if its a horizontal list this influences how the placeholder position\n // is calculated\n dndHorizontal: boolean;\n\n // set the class applied to the dropzone\n // when a draggable is dragged over it\n dndDragoverClass: string = \"dndDragover\";\n\n // set the class applied to the dropzone\n // when the dropzone is disabled by [dndDisableIf]\n dndDropzoneDisabledClass = \"dndDropzoneDisabled\";\n\n // emits when a draggable is dragged over the dropzone\n readonly dndDragover: EventEmitter;\n\n // emits on successful drop\n readonly dndDrop: EventEmitter;\n}\n```\n\n## Touch support (experimental)\n\nThis library uses the native HTML5 Drag and Drop API, which is **not supported on most mobile browsers** (including iOS Safari). Touch support requires a polyfill that translates touch events into drag events. This approach has known limitations and the experience may not be reliable on all devices.\n\nTo enable basic touch support, install the `@dragdroptouch/drag-drop-touch` polyfill:\n\n```JS\nimport { enableDragDropTouch } from \"@dragdroptouch/drag-drop-touch\";\n\nenableDragDropTouch();\n```\n\nFor more info on the polyfill check it out on GitHub\nhttps://github.com/drag-drop-touch-js/dragdroptouch\n\n## Known issues\n\n### Firefox\n\n- Beware that Firefox does not support dragging on `\n \n @for (demo of issueDemos; track demo.issue) {\n \n }\n \n\n \n \n \n\n\n@if (activeTab$ | async; as activeTab) {\n \n}\n\n\n \n\n\n\n\n \n" }, { "path": "projects/demo/src/app/app.component.scss", "content": ":host {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n max-height: 100vh;\n max-width: 100vw;\n height: 100%;\n width: 100%;\n}\n\n.container-padding {\n padding: 8px;\n}\n\n.scrollable {\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n/* workaround for flex tab content */\n/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */\nmat-tab-group ::ng-deep .mat-tab-body-wrapper {\n height: 100%;\n flex: 1 1 auto;\n}\n\n/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */\nmat-tab-group ::ng-deep .mat-tab-body-wrapper .mat-tab-body-content {\n display: flex;\n height: 100%;\n flex: 1 1 auto;\n}\n" }, { "path": "projects/demo/src/app/app.component.ts", "content": "import { Component } from '@angular/core';\nimport { MatIconRegistry } from '@angular/material/icon';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { ActivatedRoute, ActivationEnd, Router } from '@angular/router';\nimport { filter, map, Observable, shareReplay, startWith } from 'rxjs';\n\nconst TABS: string[] = [\n 'simple',\n 'list',\n 'nested',\n 'tree',\n 'native',\n 'typed',\n 'shadow-dom',\n];\n\nconst ISSUE_DEMOS: { issue: number; label: string }[] = [\n { issue: 195, label: '#195 — dropEffect ignores dropzone effectAllowed' },\n];\n\nconst DEFAULT_TAB = TABS[0];\n\n@Component({\n selector: 'dnd-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss'],\n standalone: false,\n})\nexport class AppComponent {\n readonly title = 'NgxDragDrop Demo';\n\n readonly tabs: string[] = TABS;\n readonly issueDemos = ISSUE_DEMOS;\n readonly activeTab$: Observable;\n\n constructor(\n sanitizer: DomSanitizer,\n iconRegistry: MatIconRegistry,\n activatedRoute: ActivatedRoute,\n private router: Router\n ) {\n iconRegistry.addSvgIcon(\n 'github',\n sanitizer.bypassSecurityTrustResourceUrl('assets/github.svg')\n );\n\n this.activeTab$ = this.router.events.pipe(\n filter(event => event instanceof ActivationEnd),\n map(event => {\n const activationEnd = event as ActivationEnd;\n if (!!activationEnd?.snapshot?.url?.length) {\n return activationEnd?.snapshot?.url[0]?.path ?? DEFAULT_TAB;\n }\n return DEFAULT_TAB;\n }),\n startWith(DEFAULT_TAB),\n shareReplay(1)\n );\n }\n\n onTabLinkClick(tab: string) {\n this.router.navigate([tab]);\n }\n\n onIssueDemoClick(issue: number) {\n this.router.navigate(['issue', issue]);\n }\n}\n" }, { "path": "projects/demo/src/app/app.module.ts", "content": "import {\n provideHttpClient,\n withInterceptorsFromDi,\n} from '@angular/common/http';\nimport { NgModule } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatCardModule } from '@angular/material/card';\nimport { MatLineModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatListModule } from '@angular/material/list';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\nimport { MatSnackBarModule } from '@angular/material/snack-bar';\nimport { MatTabsModule } from '@angular/material/tabs';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterModule, Routes } from '@angular/router';\nimport { DndModule } from 'ngx-drag-drop';\nimport { AppComponent } from './app.component';\nimport { DemoLinkComponent } from './demo-link/demo-link.component';\n\nconst routes: Routes = [\n {\n path: 'simple',\n loadComponent: () => import('./simple/simple.component'),\n },\n {\n path: 'list',\n loadComponent: () => import('./list/list.component'),\n },\n {\n path: 'nested',\n loadComponent: () => import('./nested/nested.component'),\n },\n {\n path: 'tree',\n loadComponent: () => import('./tree/tree.component'),\n },\n {\n path: 'native',\n loadComponent: () => import('./native/native.component'),\n },\n {\n path: 'typed',\n loadComponent: () => import('./typed/typed.component'),\n },\n {\n path: 'shadow-dom',\n loadComponent: () => import('./shadow-dom/shadow-dom.component'),\n },\n {\n path: 'issue/195',\n loadComponent: () => import('./issue-195/issue-195.component'),\n },\n {\n path: '**',\n pathMatch: 'full',\n redirectTo: 'simple',\n },\n];\n\n@NgModule({\n imports: [RouterModule.forRoot(routes)],\n exports: [RouterModule],\n})\nexport class AppRoutingModule {}\n\n@NgModule({\n declarations: [AppComponent],\n bootstrap: [AppComponent],\n imports: [\n BrowserModule,\n BrowserAnimationsModule,\n DndModule,\n MatButtonModule,\n MatInputModule,\n MatToolbarModule,\n MatCardModule,\n MatSnackBarModule,\n MatSlideToggleModule,\n MatIconModule,\n MatMenuModule,\n MatTabsModule,\n AppRoutingModule,\n MatLineModule,\n MatListModule,\n DemoLinkComponent,\n ],\n providers: [provideHttpClient(withInterceptorsFromDi())],\n})\nexport class AppModule {}\n" }, { "path": "projects/demo/src/app/demo-link/demo-link.component.html", "content": "go to sources\n" }, { "path": "projects/demo/src/app/demo-link/demo-link.component.scss", "content": ":host {\n margin: 8px 0;\n}\n" }, { "path": "projects/demo/src/app/demo-link/demo-link.component.ts", "content": "import { Component, Input } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\n\n@Component({\n selector: 'dnd-demo-link',\n templateUrl: './demo-link.component.html',\n styleUrls: ['./demo-link.component.scss'],\n standalone: true,\n imports: [MatButtonModule],\n})\nexport class DemoLinkComponent {\n @Input()\n name: string | null = null;\n\n public get url(): string {\n return `https://github.com/ChristofFritz/ngx-drag-drop/tree/master/projects/demo/src/app/${this.name}`;\n }\n}\n" }, { "path": "projects/demo/src/app/indirect-dnd-handle/indirect-dnd-handle.component.html", "content": "\n" }, { "path": "projects/demo/src/app/indirect-dnd-handle/indirect-dnd-handle.component.scss", "content": "" }, { "path": "projects/demo/src/app/indirect-dnd-handle/indirect-dnd-handle.component.ts", "content": "import { Component, HostBinding } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DndHandleDirective } from 'ngx-drag-drop';\n\n@Component({\n selector: 'dnd-indirect-handle',\n templateUrl: './indirect-dnd-handle.component.html',\n styleUrls: ['./indirect-dnd-handle.component.scss'],\n standalone: true,\n imports: [MatIconModule, DndHandleDirective],\n})\nexport class IndirectDndHandleComponent {\n @HostBinding('class.drag-handle') get dragHandle() {\n return true;\n }\n}\n" }, { "path": "projects/demo/src/app/indirect-drag-image/indirect-drag-image.component.html", "content": "
\n \n
\n" }, { "path": "projects/demo/src/app/indirect-drag-image/indirect-drag-image.component.scss", "content": "" }, { "path": "projects/demo/src/app/indirect-drag-image/indirect-drag-image.component.ts", "content": "import { Component } from '@angular/core';\nimport { DndDragImageRefDirective } from 'ngx-drag-drop';\n\n@Component({\n selector: 'dnd-indirect-drag-image',\n templateUrl: './indirect-drag-image.component.html',\n styleUrls: ['./indirect-drag-image.component.scss'],\n standalone: true,\n imports: [DndDragImageRefDirective],\n})\nexport class IndirectDragImageComponent {}\n" }, { "path": "projects/demo/src/app/issue-195/issue-195.component.html", "content": "

Issue #195: dropEffect ignores dropzone's dndEffectAllowed

\n

\n Draggable has dndEffectAllowed=\"all\". Dropzone has\n dndEffectAllowed=\"link\". On drop, the\n dropEffect should be \"link\", not\n \"move\".\n

\n\n
\n \n Drag me (effectAllowed: all)\n
\n\n \n
\n Drop here (effectAllowed: link)\n \n\n\n@if (lastDropEvent) {\n
\n
\n Dropzone received dropEffect: {{ lastDropEvent.dropEffect }}\n \n {{\n lastDropEvent.dropEffect === 'link'\n ? 'PASS'\n : 'FAIL — expected \"link\"'\n }}\n \n
\n
\n Draggable fired effect: {{ dragEffect }}\n \n {{ dragEffect === 'link' ? 'PASS' : 'FAIL — expected \"link\"' }}\n \n
\n
\n}\n" }, { "path": "projects/demo/src/app/issue-195/issue-195.component.scss", "content": ".demo {\n display: flex;\n gap: 32px;\n padding: 16px;\n align-items: flex-start;\n}\n\n.draggable {\n padding: 16px 24px;\n background: white;\n border: 2px solid #3f51b5;\n border-radius: 4px;\n cursor: move;\n}\n\n.dropzone {\n padding: 24px;\n min-height: 80px;\n min-width: 200px;\n background: #f5f5f5;\n border: 2px dashed #999;\n border-radius: 4px;\n}\n\n.placeholder {\n padding: 16px;\n border: 2px dashed orangered;\n border-radius: 4px;\n}\n\n.result {\n margin: 16px;\n padding: 12px 16px;\n background: #fafafa;\n border-radius: 4px;\n display: flex;\n gap: 16px;\n align-items: center;\n}\n\n.pass {\n color: green;\n font-weight: bold;\n}\n\n.fail {\n color: red;\n font-weight: bold;\n}\n" }, { "path": "projects/demo/src/app/issue-195/issue-195.component.ts", "content": "import { JsonPipe } from '@angular/common';\nimport { Component } from '@angular/core';\nimport {\n DndDraggableDirective,\n DndDropEvent,\n DndDropzoneDirective,\n DndPlaceholderRefDirective,\n} from 'ngx-drag-drop';\n\n@Component({\n selector: 'dnd-issue-195',\n templateUrl: './issue-195.component.html',\n styleUrls: ['./issue-195.component.scss'],\n standalone: true,\n imports: [\n DndDraggableDirective,\n DndDropzoneDirective,\n DndPlaceholderRefDirective,\n JsonPipe,\n ],\n})\nexport default class Issue195Component {\n lastDropEvent: DndDropEvent | null = null;\n dragEffect: string = '';\n\n onDrop(event: DndDropEvent) {\n this.lastDropEvent = event;\n }\n}\n" }, { "path": "projects/demo/src/app/list/list.component.html", "content": "
\n
\n
\n 
dndEffectAllowed=\"copyMove\"
\n\n \n \n \n\n @for (item of draggableListLeft; track item) {\n \n @if (item.handle) {\n \n \n
\n }\n {{ item.content }}\n effectAllowed: {{ item.effectAllowed }}\n \n }\n \n
\n\n
\n 
dndEffectAllowed=\"copyMove\"
\n\n \n \n \n @for (item of draggableListRight; track item) {\n \n @if (item.handle) {\n \n \n
\n }\n {{ item.content }}\n effectAllowed: {{ item.effectAllowed }}\n \n }\n \n
\n\n
\n 
trash (dndEffectAllowed=\"move\")
\n\n \n \n
\n \n\n\n\n\n\n\n\n" }, { "path": "projects/demo/src/app/list/list.component.scss", "content": ":host {\n display: block;\n}\n\npre {\n text-align: center;\n padding: 8px;\n}\n\n.dndList {\n transition: all 300ms ease;\n padding: 5px;\n\n &:not(.horizontal).dndDragover {\n padding-top: 12px;\n padding-bottom: 12px;\n }\n\n &.horizontal {\n &.dndDragover {\n padding-left: 12px;\n padding-right: 12px;\n padding-bottom: 12px;\n }\n\n .mat-mdc-list-item {\n max-width: 120px;\n margin: 2px;\n }\n }\n}\n\n.dndDragging {\n border: 1px solid green;\n}\n\n.dndDraggingSource {\n display: none;\n}\n\n.dndPlaceholder {\n min-height: 72px;\n}\n" }, { "path": "projects/demo/src/app/list/list.component.ts", "content": "import { Component } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatListModule } from '@angular/material/list';\nimport { MatSnackBar } from '@angular/material/snack-bar';\nimport {\n DndDraggableDirective,\n DndDropEvent,\n DndDropzoneDirective,\n DndHandleDirective,\n DndPlaceholderRefDirective,\n DropEffect,\n EffectAllowed,\n} from 'ngx-drag-drop';\n\ninterface DraggableItem {\n content: string;\n effectAllowed: EffectAllowed;\n disable: boolean;\n handle: boolean;\n}\n\ninterface DropzoneLayout {\n container: string;\n list: string;\n dndHorizontal: boolean;\n}\n\n@Component({\n selector: 'dnd-list',\n templateUrl: './list.component.html',\n styleUrls: ['./list.component.scss'],\n standalone: true,\n imports: [\n MatListModule,\n DndDropzoneDirective,\n DndPlaceholderRefDirective,\n DndDraggableDirective,\n DndHandleDirective,\n MatIconModule,\n ],\n})\nexport default class ListComponent {\n draggableListLeft: DraggableItem[] = [\n {\n content: 'Left',\n effectAllowed: 'move',\n disable: false,\n handle: false,\n },\n {\n content: 'Lefter',\n effectAllowed: 'move',\n disable: false,\n handle: false,\n },\n {\n content: 'Leftest',\n effectAllowed: 'copyMove',\n disable: false,\n handle: false,\n },\n {\n content: 'Lefty',\n effectAllowed: 'move',\n disable: false,\n handle: true,\n },\n {\n content: 'Left',\n effectAllowed: 'move',\n disable: false,\n handle: false,\n },\n {\n content: 'Lefter',\n effectAllowed: 'move',\n disable: false,\n handle: false,\n },\n {\n content: 'Leftest',\n effectAllowed: 'copyMove',\n disable: false,\n handle: false,\n },\n {\n content: 'Lefty',\n effectAllowed: 'move',\n disable: false,\n handle: true,\n },\n {\n content: 'Left',\n effectAllowed: 'move',\n disable: false,\n handle: false,\n },\n {\n content: 'Lefter',\n effectAllowed: 'move',\n disable: false,\n handle: false,\n },\n {\n content: 'Leftest',\n effectAllowed: 'copyMove',\n disable: false,\n handle: false,\n },\n {\n content: 'Lefty',\n effectAllowed: 'move',\n disable: false,\n handle: true,\n },\n ];\n\n draggableListRight: DraggableItem[] = [\n {\n content: 'I was originally right',\n effectAllowed: 'move',\n disable: false,\n handle: false,\n },\n ];\n horizontalLayoutActive: boolean = false;\n private currentDraggableEvent?: DragEvent;\n private currentDragEffectMsg?: string;\n private readonly verticalLayout: DropzoneLayout = {\n container: 'row',\n list: 'column',\n dndHorizontal: false,\n };\n layout: DropzoneLayout = this.verticalLayout;\n private readonly horizontalLayout: DropzoneLayout = {\n container: 'row',\n list: 'row wrap',\n dndHorizontal: true,\n };\n\n constructor(private snackBarService: MatSnackBar) {}\n\n setHorizontalLayout(horizontalLayoutActive: boolean) {\n this.layout = horizontalLayoutActive\n ? this.horizontalLayout\n : this.verticalLayout;\n }\n\n onDragStart(event: DragEvent) {\n this.currentDragEffectMsg = '';\n this.currentDraggableEvent = event;\n\n this.snackBarService.dismiss();\n this.snackBarService.open('Drag started!', undefined, { duration: 2000 });\n }\n\n onDragged(item: any, list: any[], effect: DropEffect) {\n this.currentDragEffectMsg = `Drag ended with effect \"${effect}\"!`;\n\n if (effect === 'move') {\n const index = list.indexOf(item);\n list.splice(index, 1);\n }\n }\n\n onDragEnd(event: DragEvent) {\n this.currentDraggableEvent = event;\n this.snackBarService.dismiss();\n this.snackBarService.open(\n this.currentDragEffectMsg || `Drag ended!`,\n undefined,\n { duration: 2000 }\n );\n }\n\n onDrop(event: DndDropEvent, list?: any[]) {\n if (list && (event.dropEffect === 'copy' || event.dropEffect === 'move')) {\n let index = event.index;\n\n if (typeof index === 'undefined') {\n index = list.length;\n }\n\n list.splice(index, 0, event.data);\n }\n }\n}\n" }, { "path": "projects/demo/src/app/native/native.component.html", "content": "
\n
\n
\n \n \n Draggable stuff\n \n Drag the image or a text selection onto the dropzone and see what\n happens\n \n \n \n
\n \n
\n\n \n\n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam\n erat, sed diam voluptua. At vero eos et accusam et justo duo dolores\n et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est\n Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur\n sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore\n et dolore magna aliquyam erat, sed diam voluptua. At vero eos et\n accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,\n no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum\n dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum\n dolor sit amet.\n \n \n \n
\n\n
\n \n \n Dropzone\n \n \n \n
\n @if (lastDropEvent) {\n 
Event: {{ lastDropEvent | json }}
\n }\n @if (lastDropTypes && lastDropTypes.length) {\n 
Types: {{ lastDropTypes | json }}
\n }\n @if (lastDropFiles && lastDropFiles.length) {\n 
Files: {{ lastDropFiles | json }}
\n }\n @if (lastDropItems && lastDropItems.length) {\n 
Items: {{ lastDropItems | json }}
\n }\n
\n
\n \n \n
\n
\n\n" }, { "path": "projects/demo/src/app/native/native.component.scss", "content": ":host {\n display: block;\n box-sizing: border-box;\n}\n\npre {\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n" }, { "path": "projects/demo/src/app/native/native.component.ts", "content": "import { JsonPipe } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { MatCardModule } from '@angular/material/card';\nimport { MatSnackBar } from '@angular/material/snack-bar';\nimport { DndDropEvent, DndDropzoneDirective } from 'ngx-drag-drop';\n\n@Component({\n selector: 'dnd-native',\n templateUrl: './native.component.html',\n styleUrls: ['./native.component.scss'],\n standalone: true,\n imports: [MatCardModule, DndDropzoneDirective, JsonPipe],\n})\nexport default class NativeComponent {\n public lastDropEvent: DndDropEvent | null = null;\n\n public lastDropTypes?: ReadonlyArray;\n public lastDropFiles?: object[];\n public lastDropItems?: object[];\n\n constructor(private snackBarService: MatSnackBar) {}\n\n onDrop(event: DndDropEvent) {\n this.snackBarService.dismiss();\n this.snackBarService.open(`Something dropped O.O`, undefined, {\n duration: 2000,\n });\n\n this.lastDropEvent = event;\n\n this.lastDropTypes = this.lastDropEvent.event.dataTransfer?.types;\n\n this.lastDropFiles = [];\n this.lastDropItems = [];\n\n if (this.lastDropEvent.event.dataTransfer?.files) {\n for (\n let i: number = 0;\n i < this.lastDropEvent.event.dataTransfer?.files.length;\n i++\n ) {\n const file = this.lastDropEvent.event.dataTransfer?.files[i];\n this.lastDropFiles.push({\n lastModifiedDate: file.lastModified,\n name: file.name,\n type: file.type,\n size: file.size,\n });\n }\n\n for (\n let i: number = 0;\n i < this.lastDropEvent.event.dataTransfer.items.length;\n i++\n ) {\n const item = this.lastDropEvent.event.dataTransfer.items[i];\n this.lastDropItems.push({\n type: item.type,\n kind: item.kind,\n data: this.lastDropEvent.event.dataTransfer.getData(item.type),\n });\n }\n }\n }\n}\n" }, { "path": "projects/demo/src/app/nested/nested.component.html", "content": "
\n \n \n \n\n @for (item of list; track item) {\n \n \n @if (item.handle) {\n
\n drag_handle \n
\n }\n {{ item.content }}\n \n \n @if (!!item.customDragImage) {\n
MY_CUSTOM_DRAG_IMAGE
\n }\n @if (item.children) {\n \n \n
\n }\n \n \n }\n \n\n \n \n \n\n" }, { "path": "projects/demo/src/app/nested/nested.component.scss", "content": ":host {\n display: block;\n box-sizing: border-box;\n}\n\nmat-card {\n transition:\n transform 200ms,\n opacity 200ms;\n}\n\nmat-card-header {\n border-bottom: 2px solid rgba(0, 0, 0, 0.04);\n align-items: center;\n min-height: 46px;\n}\n\n.dndDraggingSource {\n opacity: 0.5;\n transform: scale(0.98);\n}\n\n.dndPlaceholder {\n background: #fff;\n min-height: 46px;\n min-width: 46px;\n}\n\n[dnddropzone] {\n background: #fafafa;\n min-height: 60px;\n display: flex;\n outline: 2px solid rgba(0, 0, 0, 0.04);\n}\n" }, { "path": "projects/demo/src/app/nested/nested.component.ts", "content": "import { NgTemplateOutlet } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { MatCardModule } from '@angular/material/card';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSnackBar } from '@angular/material/snack-bar';\nimport {\n DndDraggableDirective,\n DndDragImageRefDirective,\n DndDropEvent,\n DndDropzoneDirective,\n DndHandleDirective,\n DndPlaceholderRefDirective,\n DropEffect,\n} from 'ngx-drag-drop';\n\ninterface NestableListItem {\n content: string;\n disable?: boolean;\n handle?: boolean;\n customDragImage?: boolean;\n children?: NestableListItem[];\n}\n\n@Component({\n selector: 'dnd-nested',\n templateUrl: './nested.component.html',\n styleUrls: ['./nested.component.scss'],\n standalone: true,\n imports: [\n MatCardModule,\n DndPlaceholderRefDirective,\n DndDraggableDirective,\n MatIconModule,\n DndHandleDirective,\n DndDragImageRefDirective,\n DndDropzoneDirective,\n NgTemplateOutlet,\n ],\n})\nexport default class NestedComponent {\n nestableList: NestableListItem[] = [\n {\n content: 'Got something nested',\n children: [\n {\n content: 'Nested',\n customDragImage: true,\n children: [],\n },\n ],\n },\n {\n content: 'No nested dropping here',\n },\n {\n content: 'Got more than one',\n children: [\n {\n content: 'Nested 1',\n handle: true,\n children: [],\n },\n {\n content: 'Nested 2',\n children: [],\n },\n {\n content: 'Nested 3',\n children: [],\n },\n ],\n },\n {\n content: \"Drop something, I'll catch!\",\n children: [],\n },\n ];\n\n private currentDraggableEvent?: DragEvent;\n private currentDragEffectMsg?: string;\n\n constructor(private snackBarService: MatSnackBar) {}\n\n onDragStart(event: DragEvent) {\n this.currentDragEffectMsg = '';\n this.currentDraggableEvent = event;\n\n this.snackBarService.dismiss();\n this.snackBarService.open('Drag started!', undefined, { duration: 2000 });\n }\n\n onDragged(item: any, list: any[], effect: DropEffect) {\n this.currentDragEffectMsg = `Drag ended with effect \"${effect}\"!`;\n\n if (effect === 'move') {\n const index = list.indexOf(item);\n list.splice(index, 1);\n }\n }\n\n onDragEnd(event: DragEvent) {\n this.currentDraggableEvent = event;\n this.snackBarService.dismiss();\n this.snackBarService.open(\n this.currentDragEffectMsg || `Drag ended!`,\n undefined,\n { duration: 2000 }\n );\n }\n\n onDrop(event: DndDropEvent, list?: any[]) {\n if (list && (event.dropEffect === 'copy' || event.dropEffect === 'move')) {\n let index = event.index;\n\n if (typeof index === 'undefined') {\n index = list.length;\n }\n\n list.splice(index, 0, event.data);\n }\n }\n}\n" }, { "path": "projects/demo/src/app/shadow-dom/shadow-dom.component.html", "content": "\n
\n\n @for (item of list; track item) {\n \n
{{ item.content }}
\n @if (item.children) {\n \n \n \n }\n \n }\n\n\n
\n \n
\n" }, { "path": "projects/demo/src/app/shadow-dom/shadow-dom.component.scss", "content": ":host {\n display: block;\n padding: 16px;\n}\n\n.root-dropzone,\n.nested-dropzone {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 8px;\n min-height: 40px;\n background: #f5f5f5;\n border-radius: 4px;\n}\n\n.nested-dropzone {\n margin-top: 8px;\n background: #ede7f6;\n}\n\n.drag-item {\n padding: 12px 16px;\n background: white;\n border: 1px solid #ddd;\n border-radius: 4px;\n cursor: move;\n}\n\n.drag-item-header {\n font-weight: 500;\n}\n\n.placeholder {\n padding: 12px 16px;\n border: 2px dashed orangered;\n border-radius: 4px;\n background: rgba(255, 69, 0, 0.05);\n}\n\n.dndDragover {\n outline: 2px solid #3f51b5;\n}\n" }, { "path": "projects/demo/src/app/shadow-dom/shadow-dom.component.ts", "content": "import { NgTemplateOutlet } from '@angular/common';\nimport { Component, ViewEncapsulation } from '@angular/core';\nimport {\n DndDraggableDirective,\n DndDropEvent,\n DndDropzoneDirective,\n DndPlaceholderRefDirective,\n DropEffect,\n} from 'ngx-drag-drop';\n\ninterface NestableListItem {\n content: string;\n children?: NestableListItem[];\n}\n\n@Component({\n selector: 'dnd-shadow-dom',\n templateUrl: './shadow-dom.component.html',\n styleUrls: ['./shadow-dom.component.scss'],\n standalone: true,\n encapsulation: ViewEncapsulation.ShadowDom,\n imports: [\n DndDropzoneDirective,\n DndPlaceholderRefDirective,\n DndDraggableDirective,\n NgTemplateOutlet,\n ],\n})\nexport default class ShadowDomComponent {\n nestableList: NestableListItem[] = [\n {\n content: 'Parent A',\n children: [\n { content: 'Child A.1', children: [] },\n { content: 'Child A.2', children: [] },\n ],\n },\n {\n content: 'Parent B (no children)',\n },\n {\n content: 'Parent C',\n children: [\n { content: 'Child C.1', children: [] },\n { content: 'Child C.2', children: [] },\n { content: 'Child C.3', children: [] },\n ],\n },\n {\n content: 'Parent D (empty)',\n children: [],\n },\n ];\n\n onDragged(\n item: NestableListItem,\n list: NestableListItem[],\n effect: DropEffect\n ) {\n if (effect === 'move') {\n const index = list.indexOf(item);\n list.splice(index, 1);\n }\n }\n\n onDrop(event: DndDropEvent, list?: NestableListItem[]) {\n if (list && (event.dropEffect === 'copy' || event.dropEffect === 'move')) {\n let index = event.index;\n if (typeof index === 'undefined') {\n index = list.length;\n }\n list.splice(index, 0, event.data);\n }\n }\n}\n" }, { "path": "projects/demo/src/app/simple/simple.component.html", "content": "
\n
\n
\n @for (draggable of draggables; track draggable) {\n \n \n @if (draggable.handle) {\n
\n \n
\n }\n draggable ({{ draggable.effectAllowed }})\n only with handle\n DISABLED\n \n \n }\n\n \n \n @if (draggableWithDragImage.handle) {\n
\n \n \n
\n }\n draggable ({{ draggableWithDragImage.effectAllowed }})\n only with handle\n DISABLED\n\n
MY_CUSTOM_DRAG_IMAGE
\n \n \n\n \n \n \n\n draggable ({{ draggableWithDragImage.effectAllowed }})\n\n I'm the drag image but pssst\n \n \n\n \n \n
draggable ({{ draggableWithDragImage.effectAllowed }})
\n\n \n \n \n
\n\n
\n \n \n Dropzone\n \n \n Enabled\n \n \n \n \n \n @if (lastDropEvent) {\n 
{{ lastDropEvent | json }}
\n }\n \n \n \n
\n
\n
\n" }, { "path": "projects/demo/src/app/simple/simple.component.scss", "content": ":host {\n display: block;\n height: 100%;\n}\n\n.my-dropzone {\n transition: all 300ms ease;\n}\n\n.custom-drag-over {\n background-color: rgba(0, 0, 0, 0.06);\n}\n\npre {\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n" }, { "path": "projects/demo/src/app/simple/simple.component.ts", "content": "import { JsonPipe } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { MatCardModule } from '@angular/material/card';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\nimport { MatSnackBar } from '@angular/material/snack-bar';\nimport {\n DndDraggableDirective,\n DndDragImageOffsetFunction,\n DndDragImageRefDirective,\n DndDropEvent,\n DndDropzoneDirective,\n DndHandleDirective,\n EffectAllowed,\n} from 'ngx-drag-drop';\nimport { IndirectDndHandleComponent } from '../indirect-dnd-handle/indirect-dnd-handle.component';\nimport { IndirectDragImageComponent } from '../indirect-drag-image/indirect-drag-image.component';\n\ninterface DraggableItem {\n content: string;\n effectAllowed: EffectAllowed;\n disable: boolean;\n handle: boolean;\n}\n\n@Component({\n selector: 'dnd-simple',\n templateUrl: './simple.component.html',\n styleUrls: ['./simple.component.scss'],\n standalone: true,\n imports: [\n MatCardModule,\n DndDraggableDirective,\n DndHandleDirective,\n MatIconModule,\n DndDragImageRefDirective,\n IndirectDndHandleComponent,\n IndirectDragImageComponent,\n MatSlideToggleModule,\n DndDropzoneDirective,\n JsonPipe,\n ],\n})\nexport default class SimpleComponent {\n draggables: DraggableItem[] = [\n {\n content: 'testdata',\n effectAllowed: 'copy',\n disable: false,\n handle: false,\n },\n {\n content: 'testdata2',\n effectAllowed: 'move',\n disable: false,\n handle: false,\n },\n {\n content: 'testdata3',\n effectAllowed: 'link',\n disable: false,\n handle: false,\n },\n {\n content: 'testdata4',\n effectAllowed: 'copy',\n disable: true,\n handle: false,\n },\n {\n content: 'testdata5',\n effectAllowed: 'copy',\n disable: false,\n handle: true,\n },\n ];\n\n draggableWithDragImage: DraggableItem = {\n content: 'testdata6',\n effectAllowed: 'copy',\n disable: false,\n handle: true,\n };\n\n public dropzoneEnabled: boolean = true;\n public lastDropEvent: DndDropEvent | null = null;\n\n private currentDraggableEvent?: DragEvent;\n private currentDragEffectMsg?: string;\n\n constructor(private snackBarService: MatSnackBar) {}\n\n dragImageOffsetRight: DndDragImageOffsetFunction = (\n event: DragEvent,\n dragImage: Element\n ) => {\n const dragImageComputedStyle = window.getComputedStyle(dragImage);\n const paddingTop = parseFloat(dragImageComputedStyle.paddingTop) || 0;\n const paddingLeft = parseFloat(dragImageComputedStyle.paddingLeft) || 0;\n const borderTop = parseFloat(dragImageComputedStyle.borderTopWidth) || 0;\n const borderLeft = parseFloat(dragImageComputedStyle.borderLeftWidth) || 0;\n\n const x =\n dragImage.clientWidth - (event.offsetX + paddingLeft + borderLeft);\n return {\n x: x,\n y: event.offsetY + paddingTop + borderTop,\n };\n };\n\n onDragStart(event: DragEvent) {\n this.lastDropEvent = null;\n\n this.currentDragEffectMsg = '';\n this.currentDraggableEvent = event;\n\n this.snackBarService.dismiss();\n this.snackBarService.open('Drag started!', undefined, { duration: 2000 });\n }\n\n onDragged($event: DragEvent, effect: string) {\n this.currentDragEffectMsg = `Drag ended with effect \"${effect}\"!`;\n }\n\n onDragEnd(event: DragEvent) {\n this.currentDraggableEvent = event;\n this.snackBarService.dismiss();\n this.snackBarService.open(\n this.currentDragEffectMsg || `Drag ended!`,\n undefined,\n { duration: 2000 }\n );\n }\n\n onDrop(event: DndDropEvent) {\n this.lastDropEvent = event;\n }\n}\n" }, { "path": "projects/demo/src/app/tree/tree.component.html", "content": "
\n \n \n\n @for (item of list; track item) {\n
\n \n {{ item.content }}\n \n @if (item.children) {\n \n \n \n }\n
\n }\n \n\n
\n
\n \n \n \n
\n
\n 
{{ draggableList | json }}
\n
\n
\n
\n" }, { "path": "projects/demo/src/app/tree/tree.component.scss", "content": ".dndDraggingSource {\n opacity: 0.5;\n transform: scale(0.98);\n pointer-events: none;\n\n & > * {\n pointer-events: none;\n }\n}\n" }, { "path": "projects/demo/src/app/tree/tree.component.ts", "content": "import { CommonModule } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatListModule } from '@angular/material/list';\nimport {\n DndDraggableDirective,\n DndDropEvent,\n DndDropzoneDirective,\n DndPlaceholderRefDirective,\n DropEffect,\n} from 'ngx-drag-drop';\n\ninterface DraggableItem {\n content: string;\n children: DraggableItem[];\n}\n\n@Component({\n selector: 'dnd-tree',\n standalone: true,\n imports: [\n CommonModule,\n DndDropzoneDirective,\n DndPlaceholderRefDirective,\n MatIconModule,\n MatListModule,\n DndDraggableDirective,\n ],\n templateUrl: './tree.component.html',\n styleUrls: ['./tree.component.scss'],\n})\nexport default class TreeComponent {\n draggableList: DraggableItem[] = [\n {\n content: 'Demo 1',\n children: [\n {\n content: 'Nested 1',\n children: [],\n },\n {\n content: 'Nested 2',\n children: [],\n },\n {\n content: 'Nested 3',\n children: [],\n },\n ],\n },\n {\n content: 'Demo 2',\n children: [],\n },\n {\n content: 'Demo 3',\n children: [],\n },\n {\n content: 'Demo 4',\n children: [],\n },\n {\n content: 'Demo 5',\n children: [],\n },\n {\n content: 'Demo 6',\n children: [],\n },\n {\n content: 'Demo 7',\n children: [],\n },\n {\n content: 'Demo 8',\n children: [],\n },\n {\n content: 'Demo 9',\n children: [],\n },\n {\n content: 'Demo 10',\n children: [\n {\n content: 'Nested 1',\n children: [],\n },\n {\n content: 'Nested 2',\n children: [],\n },\n {\n content: 'Nested 3',\n children: [],\n },\n ],\n },\n ];\n\n onDragged(item: any, list: any[], effect: DropEffect) {\n if (effect === 'move') {\n const index = list.indexOf(item);\n list.splice(index, 1);\n }\n }\n\n onDrop(event: DndDropEvent, list?: any[]) {\n console.log('onDrop', event, list);\n\n if (list && (event.dropEffect === 'copy' || event.dropEffect === 'move')) {\n let index = event.index;\n\n if (typeof index === 'undefined') {\n index = list.length;\n }\n\n list.splice(index, 0, event.data);\n }\n }\n}\n" }, { "path": "projects/demo/src/app/typed/typed.component.html", "content": "
\n
\n
\n 
Fruits
\n \n \n \n @for (fruit of fruits; track trackByFruit(i, fruit); let i = $index) {\n \n {{ fruit.type }} {{ fruit.id }}\n \n }\n \n
\n\n
\n 
Apples
\n \n \n \n @for (apple of apples; track trackByFruit(i, apple); let i = $index) {\n \n {{ apple.type }} {{ apple.id }}\n \n }\n \n
\n\n
\n 
Bananas
\n \n \n \n @for (\n banana of bananas;\n track trackByFruit(i, banana);\n let i = $index\n ) {\n \n {{ banana.type }} {{ banana.id }}\n \n }\n \n
\n
\n
\n" }, { "path": "projects/demo/src/app/typed/typed.component.scss", "content": ":host {\n display: block;\n box-sizing: border-box;\n}\n\npre {\n text-align: center;\n padding: 8px;\n}\n\n.mat-mdc-list-item {\n margin: 2px 0;\n border: 1px solid gray;\n}\n\n.dndList {\n transition: all 300ms ease;\n\n padding: 8px;\n\n overflow-y: auto;\n\n &.dndDragover {\n padding-top: 12px;\n padding-bottom: 12px;\n\n border-color: green;\n }\n}\n\n.dndDragging {\n border: 1px solid green;\n}\n\n.dndDraggingSource {\n display: none;\n}\n\n.dndPlaceholder {\n min-height: 48px;\n border: 1px dashed green;\n background-color: rgba(0, 0, 0, 0.1);\n}\n\npre {\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n" }, { "path": "projects/demo/src/app/typed/typed.component.ts", "content": "import { Component } from '@angular/core';\nimport { MatListModule } from '@angular/material/list';\nimport {\n DndDraggableDirective,\n DndDropEvent,\n DndDropzoneDirective,\n DndPlaceholderRefDirective,\n} from 'ngx-drag-drop';\n\ntype Apple = 'apple';\ntype Banana = 'banana';\ntype FruitType = Apple | Banana;\n\ninterface Fruit {\n id: number;\n type: FruitType;\n}\n\nlet id = 0;\n\nfunction createFruit(type: FruitType) {\n return {\n id: id++,\n type: type,\n };\n}\n\nfunction range(start: number, end: number) {\n return Array.from({ length: end - start + 1 }, (_, i) => i);\n}\n\n@Component({\n selector: 'dnd-typed',\n templateUrl: './typed.component.html',\n styleUrls: ['./typed.component.scss'],\n standalone: true,\n imports: [\n MatListModule,\n DndDropzoneDirective,\n DndPlaceholderRefDirective,\n DndDraggableDirective,\n ],\n})\nexport default class TypedComponent {\n public fruits: Fruit[] = range(0, 100).map(_ => {\n const randomFruitType: FruitType = Math.random() < 0.5 ? 'apple' : 'banana';\n return createFruit(randomFruitType);\n });\n\n public apples: Fruit[] = range(0, 12).map(_ => {\n return createFruit('apple');\n });\n\n public bananas: Fruit[] = range(0, 10).map(_ => {\n return createFruit('banana');\n });\n\n trackByFruit(index: number, fruit: Fruit) {\n return fruit;\n }\n\n onDragged(index: number, fruit: Fruit, list: Fruit[]) {\n const removeIndex = list.indexOf(fruit);\n console.log(\n `onDragged ngFor-index=${index}, item=${fruit}, removeIndex=${removeIndex}, list=${list.length}`\n );\n list.splice(removeIndex, 1);\n }\n\n onDrop(event: DndDropEvent, list: Fruit[]) {\n console.log('onDrop', event, list.length);\n let index = event.index;\n if (typeof index === 'undefined') {\n index = list.length;\n }\n list.splice(index, 0, event.data);\n }\n}\n" }, { "path": "projects/demo/src/assets/.gitkeep", "content": "" }, { "path": "projects/demo/src/dragdroptouch.d.ts", "content": "declare module '@dragdroptouch/drag-drop-touch' {\n export function enableDragDropTouch(\n dragRoot?: Element,\n dropRoot?: Element,\n options?: Record\n ): void;\n}\n" }, { "path": "projects/demo/src/environments/environment.prod.ts", "content": "export const environment = {\n production: true,\n};\n" }, { "path": "projects/demo/src/environments/environment.ts", "content": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build` replaces `environment.ts` with `environment.prod.ts`.\n// The list of file replacements can be found in `angular.json`.\n\nexport const environment = {\n production: false,\n};\n\n/*\n * For easier debugging in development mode, you can import the following file\n * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.\n *\n * This import should be commented out in production mode because it will have a negative impact\n * on performance if an error is thrown.\n */\n// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.\n" }, { "path": "projects/demo/src/index.html", "content": "\n\n \n \n NgxDragDrop\n \n \n \n \n \n \n \n \n \n \n\n" }, { "path": "projects/demo/src/main.ts", "content": "import { enableProdMode, provideZoneChangeDetection } from '@angular/core';\nimport { platformBrowser } from '@angular/platform-browser';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n enableProdMode();\n}\n\nplatformBrowser()\n .bootstrapModule(AppModule, {\n applicationProviders: [provideZoneChangeDetection()],\n })\n .catch(err => console.error(err));\n" }, { "path": "projects/demo/src/polyfills.ts", "content": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n * 2. Application imports. Files imported after ZoneJS that should be loaded before your main\n * file.\n *\n * The current setup is for so-called \"evergreen\" browsers; the last versions of browsers that\n * automatically update themselves. This includes recent versions of Safari, Chrome (including\n * Opera), Edge on the desktop, and iOS and Chrome on mobile.\n *\n * Learn more in https://angular.io/guide/browser-support\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/**\n * By default, zone.js will patch all possible macroTask and DomEvents\n * user can disable parts of macroTask/DomEvents patch by setting following flags\n * because those flags need to be set before `zone.js` being loaded, and webpack\n * will put import in the top of bundle, so user need to create a separate file\n * in this directory (for example: zone-flags.ts), and put the following flags\n * into that file, and then add the following code before importing zone.js.\n * import './zone-flags';\n *\n * The flags allowed in zone-flags.ts are listed here.\n *\n * The following flags will work for all browsers.\n *\n * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame\n * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick\n * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames\n *\n * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js\n * with the following flag, it will bypass `zone.js` patch for IE/Edge\n *\n * (window as any).__Zone_enable_cross_context_check = true;\n *\n */\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\nimport { enableDragDropTouch } from '@dragdroptouch/drag-drop-touch';\n/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n */\nimport 'zone.js'; // Included with Angular CLI.\n\nenableDragDropTouch();\n" }, { "path": "projects/demo/src/styles.scss", "content": "@import 'bootstrap/scss/bootstrap.scss';\n\n.drag-handle {\n border: 1px solid #ddd;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n // Important because the material design would overwrite it in the mat-list\n width: 28px !important;\n height: 28px !important;\n}\n\n/* You can add global styles to this file, and also import other style files */\nhtml,\nbody {\n margin: 0;\n\n height: 100%;\n width: 100%;\n\n min-height: 100vh;\n\n display: flex;\n flex: 1;\n\n background: #fafafa;\n}\n\n.layout-padding {\n padding: 8px;\n}\n\n.layout-padding > * {\n margin: 8px;\n}\n\n.scrollable {\n -webkit-overflow-scrolling: touch;\n overflow-x: auto;\n overflow-y: auto;\n}\n\n[dndHandle],\n[draggable='true']:not(:has([dndHandle])) {\n cursor: pointer;\n}\n\n[draggable].dndDraggableDisabled {\n cursor: not-allowed;\n opacity: 0.7;\n}\n\n[dndDropzone] {\n // border: 1px red solid;\n min-width: 200px;\n min-height: 200px;\n}\n\n[dndDropzone].dndDropzoneDisabled {\n cursor: no-drop;\n opacity: 0.7;\n border-color: gray;\n}\n\n[dndDropzone].dndDragover {\n border-color: green;\n}\n\nhtml,\nbody {\n height: 100%;\n}\n\nbody {\n margin: 0;\n font-family: Roboto, 'Helvetica Neue', sans-serif;\n}\n" }, { "path": "projects/demo/tsconfig.app.json", "content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../../out-tsc/app\",\n \"types\": []\n },\n \"files\": [\"src/main.ts\", \"src/polyfills.ts\"],\n \"include\": [\"src/**/*.d.ts\"]\n}\n" }, { "path": "projects/demo/tsconfig.spec.json", "content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../../out-tsc/spec\"\n },\n \"files\": [\"src/test.ts\", \"src/polyfills.ts\"],\n \"include\": [\"src/**/*.spec.ts\", \"src/**/*.d.ts\"]\n}\n" }, { "path": "projects/dnd/.browserslistrc", "content": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For additional information regarding the format and rule options, please see:\n# https://github.com/browserslist/browserslist#queries\n\n# For the full list of supported browsers by the Angular framework, please see:\n# https://angular.io/guide/browser-support\n\n# You can see what browsers were selected by your queries by running:\n# npx browserslist\n\nlast 1 Chrome version\nlast 1 Firefox version\nlast 2 Edge major versions\nlast 2 Safari major versions\nlast 2 iOS major versions\nFirefox ESR\n" }, { "path": "projects/dnd/README.md", "content": "[![npm](https://img.shields.io/npm/v/ngx-drag-drop.svg)](https://www.npmjs.com/package/ngx-drag-drop)\n[![npm (next)](https://img.shields.io/npm/v/ngx-drag-drop/next.svg)](https://www.npmjs.com/package/ngx-drag-drop)\n[![NpmLicense](https://img.shields.io/npm/l/ngx-drag-drop.svg)](https://www.npmjs.com/package/ngx-drag-drop)\n[![GitHub issues](https://img.shields.io/github/issues/ChristofFritz/ngx-drag-drop.svg)](https://github.com/ChristofFritz/ngx-drag-drop/issues)\n[![Twitter](https://img.shields.io/twitter/url/https/github.com/ChristofFritz/ngx-drag-drop.svg?style=social)](https://twitter.com/intent/tweet?text=Angular%20drag%20and%20drop%20with%20ease:&url=https://github.com/ChristofFritz/ngx-drag-drop)\n\n# NgxDragDrop\n\n[_Demo_](https://christoffritz.github.io/ngx-drag-drop/) / [_StackBlitz Issue\nTemplate_](https://stackblitz.com/edit/ngx-drag-drop-issue-template)\n\n```sh\nnpm install ngx-drag-drop\n# or\npnpm add ngx-drag-drop\n```\n\n**Angular directives for declarative drag and drop using the HTML5 Drag-And-Drop API**\n\n- sortable lists by using placeholder element (vertical and horizontal)\n- nestable\n- dropzones optionally support external/native draggables (img, txt, file)\n- conditional drag/drop\n- typed drag/drop\n- utilize [EffectAllowed](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed)\n- custom CSS classes\n- touch support by using a [polyfill](#touch-support)\n- [AOT](https://angular.io/guide/aot-compiler) compatible\n\nPort of [angular-drag-drop-lists](https://github.com/marceljuenemann/angular-drag-and-drop-lists) but without the lists :wink:\n\nThis has `dropzones` though :+1:\nThe idea is that the directive does not handle lists internally so the `dndDropzone` can be general purpose.\n\n## Angular Version Compatibility\n\nStarting with v13, the library major version matches the Angular major version.\n\n| Angular | ngx-drag-drop |\n| ------- | ------------- |\n| 21.x | 21.x |\n| 20.x | 20.x |\n| 19.x | 19.x |\n| 18.x | 18.x |\n| 17.x | 17.x |\n| 16.x | 16.x |\n| 15.x | 15.x |\n| 14.x | 14.x |\n| 13.x | 13.x |\n\nFor older Angular versions (v4–v12), use ngx-drag-drop v2.x.\n\n## Usage\n\n`app.component.html`\n\n```HTML\n\n\n\n \n HANDLE\n \n\n draggable ({{draggable.effectAllowed}}) DISABLED\n\n \n
DRAG_IMAGE
\n\n\n\n\n\n\n\n dropzone\n\n \n \n \n placeholder\n \n\n\n```\n\n`app.component`\n\n```JS\nimport {Component} from '@angular/core';\n\nimport {DndDropEvent} from 'ngx-drag-drop';\n\n@Component()\nexport class AppComponent {\n\n draggable = {\n // note that data is handled with JSON.stringify/JSON.parse\n // only set simple data or POJO's as methods will be lost\n data: \"myDragData\",\n effectAllowed: \"all\",\n disable: false,\n handle: false\n };\n\n onDragStart(event: DragEvent) {\n\n console.log(\"drag started\", JSON.stringify(event, null, 2));\n }\n\n onDragEnd(event: DragEvent) {\n\n console.log(\"drag ended\", JSON.stringify(event, null, 2));\n }\n\n onDraggableCopied(event: DragEvent) {\n\n console.log(\"draggable copied\", JSON.stringify(event, null, 2));\n }\n\n onDraggableLinked(event: DragEvent) {\n\n console.log(\"draggable linked\", JSON.stringify(event, null, 2));\n }\n\n onDraggableMoved(event: DragEvent) {\n\n console.log(\"draggable moved\", JSON.stringify(event, null, 2));\n }\n\n onDragCanceled(event: DragEvent) {\n\n console.log(\"drag cancelled\", JSON.stringify(event, null, 2));\n }\n\n onDragover(event: DragEvent) {\n\n console.log(\"dragover\", JSON.stringify(event, null, 2));\n }\n\n onDrop(event: DndDropEvent) {\n\n console.log(\"dropped\", JSON.stringify(event, null, 2));\n }\n}\n```\n\n`app.module`\n\n```JS\nimport {BrowserModule} from '@angular/platform-browser';\nimport {NgModule} from '@angular/core';\n\nimport {DndModule} from 'ngx-drag-drop';\n\nimport {AppComponent} from './app.component';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n DndModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n## API\n\n```TS\n// https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect\nexport type DropEffect = \"move\" | \"copy\" | \"link\" | \"none\";\n\n// https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed\nexport type EffectAllowed = DropEffect | \"copyMove\" | \"copyLink\" | \"linkMove\" | \"all\";\n```\n\n```TS\nexport type DndDragImageOffsetFunction = ( event:DragEvent, dragImage:Element ) => { x:number, y:number };\n\n@Directive( {\n selector: \"[dndDraggable]\"\n} )\nexport declare class DndDraggableDirective {\n\n // the data attached to the drag\n dndDraggable: any;\n\n // the allowed drop effect\n dndEffectAllowed: EffectAllowed;\n\n // optionally set the type of dragged data to restrict dropping on compatible dropzones\n dndType?: string;\n\n // conditionally disable the draggability\n dndDisableIf: boolean;\n dndDisableDragIf: boolean;\n\n // set a custom class that is applied while dragging\n dndDraggingClass: string = \"dndDragging\";\n\n // set a custom class that is applied to only the src element while dragging\n dndDraggingSourceClass: string = \"dndDraggingSource\";\n\n // set the class that is applied when draggable is disabled by [dndDisableIf]\n dndDraggableDisabledClass = \"dndDraggableDisabled\";\n\n // enables to set a function for calculating custom dragimage offset\n dndDragImageOffsetFunction:DndDragImageOffsetFunction = calculateDragImageOffset;\n\n // emits on drag start\n readonly dndStart: EventEmitter;\n\n // emits on drag\n readonly dndDrag: EventEmitter;\n\n // emits on drag end\n readonly dndEnd: EventEmitter;\n\n // emits when the dragged item has been dropped with effect \"move\"\n readonly dndMoved: EventEmitter;\n\n // emits when the dragged item has been dropped with effect \"copy\"\n readonly dndCopied: EventEmitter;\n\n // emits when the dragged item has been dropped with effect \"link\"\n readonly dndLinked: EventEmitter;\n\n // emits when the drag is canceled\n readonly dndCanceled: EventEmitter;\n}\n```\n\n```TS\nexport interface DndDropEvent {\n\n // the original drag event\n event: DragEvent;\n\n // the actual drop effect\n dropEffect: DropEffect;\n\n // true if the drag did not origin from a [dndDraggable]\n isExternal:boolean;\n\n // the data set on the [dndDraggable] that started the drag\n // for external drags use the event property which contains the original drop event as this will be undefined\n data?: any;\n\n // the index where the draggable was dropped in a dropzone\n // set only when using a placeholder\n index?: number;\n\n // if the dndType input on dndDraggable was set\n // it will be transported here\n type?: any;\n}\n\n@Directive( {\n selector: \"[dndDropzone]\"\n} )\nexport declare class DndDropzoneDirective {\n\n // optionally restrict the allowed types\n dndDropzone?: string[];\n\n // set the allowed drop effect\n dndEffectAllowed: EffectAllowed;\n\n // conditionally disable the dropzone\n dndDisableIf: boolean;\n dndDisableDropIf: boolean;\n\n // if draggables that are not [dndDraggable] are allowed to be dropped\n // set to true if dragged text, images or files should be handled\n dndAllowExternal: boolean;\n\n // if its a horizontal list this influences how the placeholder position\n // is calculated\n dndHorizontal: boolean;\n\n // set the class applied to the dropzone\n // when a draggable is dragged over it\n dndDragoverClass: string = \"dndDragover\";\n\n // set the class applied to the dropzone\n // when the dropzone is disabled by [dndDisableIf]\n dndDropzoneDisabledClass = \"dndDropzoneDisabled\";\n\n // emits when a draggable is dragged over the dropzone\n readonly dndDragover: EventEmitter;\n\n // emits on successful drop\n readonly dndDrop: EventEmitter;\n}\n```\n\n## Touch support\n\nInstall the `mobile-drag-drop` module available on npm.\n\nAdd the following lines to your js code\n\n```JS\nimport { polyfill } from 'mobile-drag-drop';\n// optional import of scroll behaviour\nimport { scrollBehaviourDragImageTranslateOverride } from \"mobile-drag-drop/scroll-behaviour\";\n\npolyfill( {\n // use this to make use of the scroll behaviour\n dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride\n} );\n\n// workaround to make scroll prevent work in iOS Safari > 10\ntry {\n window.addEventListener( \"touchmove\", function() { }, { passive: false } );\n}\ncatch(e){}\n```\n\nFor more info on the polyfill check it out on GitHub\nhttps://github.com/timruffles/mobile-drag-drop\n\n## Known issues\n\n### Firefox\n\n- Beware that Firefox does not support dragging on `