{"_id":"@budsalvetti/ngx-drag-drop","_rev":"1-d43f9f72a56d85bc5649983535365a2f","name":"@budsalvetti/ngx-drag-drop","dist-tags":{"latest":"2.0.1"},"versions":{"2.0.1":{"name":"@budsalvetti/ngx-drag-drop","version":"2.0.1","description":"Angular directives using the native HTML Drag And Drop API","repository":{"type":"git","url":"git+https://github.com/reppners/ngx-drag-drop.git"},"homepage":"https://reppners.github.io/ngx-drag-drop/","author":{"name":"Stefan Steinhart","email":"stefanreppner@googlemail.com"},"license":"BSD-3-Clause","keywords":["angular","html","drag","drop","dragdrop","dragndrop","dnd","directive","touch"],"main":"bundles/ngx-drag-drop.umd.js","devDependencies":{"@angular-devkit/build-angular":"~0.13.0","@angular/animations":"^7.2.7","@angular/cdk":"^7.3.3","@angular/cli":"^7.3.4","@angular/common":"^7.2.7","@angular/compiler":"^7.2.7","@angular/compiler-cli":"^7.2.7","@angular/core":"^7.2.7","@angular/flex-layout":"7.0.0-beta.23","@angular/forms":"^7.2.7","@angular/http":"^7.2.7","@angular/material":"^7.3.3","@angular/platform-browser":"^7.2.7","@angular/platform-browser-dynamic":"^7.2.7","@angular/router":"^7.2.7","@types/jasmine":"2.5.38","@types/node":"~6.0.60","codelyzer":"^4.5.0","core-js":"^2.5.3","hammerjs":"^2.0.8","jasmine-core":"~2.5.2","jasmine-spec-reporter":"~3.2.0","karma":"~1.4.1","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^0.2.0","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","mobile-drag-drop":"^2.3.0-rc.1","ng-packagr":"^4.7.1","protractor":"~5.1.0","run-sequence":"^1.2.2","rxjs":"^6.4.0","ts-node":"~8.0.2","tsickle":"^0.34.3","tslint":"^5.13.1","typescript":"3.2.4","zone.js":"^0.8.29"},"peerDependencies":{},"engines":{"node":">=8.9.0"},"dependencies":{"tslib":"^1.9.0"},"module":"fesm5/ngx-drag-drop.js","es2015":"fesm2015/ngx-drag-drop.js","esm5":"esm5/ngx-drag-drop.js","esm2015":"esm2015/ngx-drag-drop.js","fesm5":"fesm5/ngx-drag-drop.js","fesm2015":"fesm2015/ngx-drag-drop.js","typings":"ngx-drag-drop.d.ts","metadata":"ngx-drag-drop.metadata.json","sideEffects":false,"bugs":{"url":"https://github.com/reppners/ngx-drag-drop/issues"},"_id":"@budsalvetti/ngx-drag-drop@2.0.1","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-ilJjD+rtKDL7uMdyIFBWzICnXnntHYqoiPjoDfWviLOj4xqQL+1cJeXLDE2Vnsc/bH2dlPMz5iyhv3hdZszGqg==","shasum":"b362681ff14b87c6b54fff845e7a9513f1b1b0cf","tarball":"https://registry.npmjs.org/@budsalvetti/ngx-drag-drop/-/ngx-drag-drop-2.0.1.tgz","fileCount":39,"unpackedSize":548385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7D2hCRA9TVsSAnZWagAARZ0P/AognSQcbsr9Urf5GlPs\nh70lzkJUH1n+JWHDw3dTM7HH0j7N4WwF21NnUjkbytQsTrf1XukVaqhv9AZA\njWbRN8V1kW1jP+yItwPShMiTJKeZRzRgKzOLak9kjNrF3QwxUhESu5IKnjC4\neDokAxEzqnY3ofL/XqWo319vtiJK9lkeYkpYMeu+3YcBrTGfBsZGz1DZOVq8\nPyJZMZgShw6DvM5HHdC2YH06sGCjWOu0iUYf2yAFGFzFKfvhX+yOB4hfiPHy\nf6BiRitscLoPK7IkM3zbbEBOJjqZGwKQ5WLkKiOrKOKBM+oz46QWZWhSsRQo\nuDgbjTrL9cTkHriT9z0olVM+xjIgZvni9FTdMxyzEAJfTjkeaBnp4OdtL9jb\nurr02/BUxaByVfWgftUj3N5gZh0qRDEuaYERzysQChjBUKozmlJsIggAWHbO\niIXoDx15c7MUR+1lIjjalPF2bPJF8bd+8dxM83oqNORn8LB3K9WY5slFcMlR\n+axblNq8ClchNZwj1NuPZO40eZfHfX145Yks2cWEQ/Xxb7ehSJr1aP99EfxW\n7TGe7T2+85+mb6gpKj18vAj+5ODGJjjZ4PYNdHuztFgw+dBs14uwKdUMR/me\nHP1Gi9QBJoihtcUm7R0X9DSEkufPDTpIz7SHJrTwbexcnyppHpV6bx+HAg9b\nar+9\r\n=+dd3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDK/h6Ijsbif8aTLKE5c/GJZrHtJl7YiOIvZlRCKO+gPwIhAL9CWwrumtZ4W2dtngnnTDBLKaQKaleX5kwSoR33ZV4E"}]},"maintainers":[{"name":"budsalvetti","email":"budsalvetti@gmail.com"}],"_npmUser":{"name":"budsalvetti","email":"budsalvetti@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-drag-drop_2.0.1_1592540577022_0.5299791835307239"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-19T04:22:56.984Z","2.0.1":"2020-06-19T04:22:57.212Z","modified":"2022-04-04T20:57:02.559Z"},"maintainers":[{"name":"budsalvetti","email":"budsalvetti@gmail.com"}],"description":"Angular directives using the native HTML Drag And Drop API","homepage":"https://reppners.github.io/ngx-drag-drop/","keywords":["angular","html","drag","drop","dragdrop","dragndrop","dnd","directive","touch"],"repository":{"type":"git","url":"git+https://github.com/reppners/ngx-drag-drop.git"},"author":{"name":"Stefan Steinhart","email":"stefanreppner@googlemail.com"},"bugs":{"url":"https://github.com/reppners/ngx-drag-drop/issues"},"license":"BSD-3-Clause","readme":"[![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/reppners/ngx-drag-drop.svg)](https://github.com/reppners/ngx-drag-drop/issues)\n[![Twitter](https://img.shields.io/twitter/url/https/github.com/reppners/ngx-drag-drop.svg?style=social)](https://twitter.com/intent/tweet?text=Angular%20drag%20and%20drop%20with%20ease:&url=https://github.com/reppners/ngx-drag-drop)\n\n# NgxDragDrop\n\n[_Demo_](https://reppners.github.io/ngx-drag-drop/) / [_StackBlitz Issue Template_](https://stackblitz.com/edit/ngx-drag-drop-issue-template)\n\n`npm install ngx-drag-drop --save`\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\n## Usage\n\n`app.component.html`\n```HTML\n<!--a draggable element-->\n<div [dndDraggable]=\"draggable.data\"\n     [dndEffectAllowed]=\"draggable.effectAllowed\"\n     [dndDisableIf]=\"draggable.disable\"\n     (dndStart)=\"onDragStart($event)\"\n     (dndCopied)=\"onDraggableCopied($event)\"\n     (dndLinked)=\"onDraggableLinked($event)\"\n     (dndMoved)=\"onDraggableMoved($event)\"\n     (dndCanceled)=\"onDragCanceled($event)\"\n     (dndEnd)=\"onDragEnd($event)\">\n      \n    <!--if [dndHandle] is used inside dndDraggable drag can only start from the handle-->\n    <div *ngIf=\"draggable.handle\"\n         dndHandle>HANDLE\n    </div>\n    \n    draggable ({{draggable.effectAllowed}}) <span [hidden]=\"!draggable.disable\">DISABLED</span>\n    \n    <!--optionally select a child element as drag image-->\n    <div dndDragImageRef>DRAG_IMAGE</div>\n    \n</div>\n\n<!--a dropzone-->\n<!--to allow dropping content that is not [dndDraggable] set dndAllowExternal to true-->\n<section dndDropzone\n         (dndDragover)=\"onDragover($event)\"\n         (dndDrop)=\"onDrop($event)\">\n      \n    dropzone \n    \n    <!--optional placeholder element for dropzone-->\n    <!--will be removed from DOM on init-->\n    <div style=\"border: 1px orangered solid; border-radius: 5px; padding: 15px;\"\n         dndPlaceholderRef>\n        placeholder\n    </div>\n\n</section>\n```\n\n`app.component`\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<DragEvent>;\n    \n    // emits on drag\n    readonly dndDrag: EventEmitter<DragEvent>;\n    \n    // emits on drag end\n    readonly dndEnd: EventEmitter<DragEvent>;\n    \n    // emits when the dragged item has been dropped with effect \"move\"\n    readonly dndMoved: EventEmitter<DragEvent>;\n    \n    // emits when the dragged item has been dropped with effect \"copy\"\n    readonly dndCopied: EventEmitter<DragEvent>;\n    \n    // emits when the dragged item has been dropped with effect \"link\"\n    readonly dndLinked: EventEmitter<DragEvent>;\n    \n    // emits when the drag is canceled\n    readonly dndCanceled: EventEmitter<DragEvent>;\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<DragEvent>;\n    \n    // emits on successful drop\n    readonly dndDrop: EventEmitter<DndDropEvent>;\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```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 `<button>` elements.\n  * `<button [dndDraggable]>` and `<button [dndHandler]>` won't work. \n  * See https://bugzilla.mozilla.org/show_bug.cgi?id=568313 \n\n\n## Why?\n\nHTML Drag-And-Drop API implementations are not behaving the same way across browsers.\n\nThe directives contained in this module enable declarative drag and drop that \"just works\" across browsers in a consistent way.\n\nCredits go to the author and contributors of [angular-drag-drop-lists](https://github.com/marceljuenemann/angular-drag-and-drop-lists). \n\n## Maintenance\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli).\n\nFor the library build it uses [ng-packagr](https://github.com/dherges/ng-packagr).\n\n#### Edit Library\n\n* edit lib code\n* run `npm start` (currently needs to be re-run on every lib code change)\n\n#### Release Library\n\n* assure correct version is set in `package.json`\n* build library with `npm run build:lib`\n* publish library with `npm run publish:stable` (use `npm run publish:next` for pre-releases)\n\n#### Release Docs\n\n* build docs site with `npm run build:docs`\n* commit and push changes in `docs` to `master`\n\n\n---\n\n<p align=\"center\">\nMade with :heart: & \n<a href=\"https://www.jetbrains.com/?from=ngx-drag-drop\">\n  <img align=\"center\" alt=\"jetbrains\" src=\"jetbrains.svg\" width=\"120px\" />\n</a>\n& :coffee:\n</p>\n","readmeFilename":"README.md"}