		{
		"name": "ngx-drag-drop",
		"version": "2.0.0",
		"version": "13.1.0-alpha.0",
		"description": "Angular directives using the native HTML Drag And Drop API",
		@@ -26,59 +26,29 @@ "repository": {
		],
		"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": {
		"@angular/common": "^13.1.0",
		"@angular/core": "^13.1.0"
		},
		"peerDependencies": {},
		"engines": {
		"node": ">=8.9.0"
		},
		"dependencies": {
		"tslib": "^1.9.0"
		"tslib": "^2.3.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",
		"module": "fesm2015/ngx-drag-drop.mjs",
		"es2020": "fesm2020/ngx-drag-drop.mjs",
		"esm2020": "esm2020/ngx-drag-drop.mjs",
		"fesm2020": "fesm2020/ngx-drag-drop.mjs",
		"fesm2015": "fesm2015/ngx-drag-drop.mjs",
		"typings": "ngx-drag-drop.d.ts",
		"metadata": "ngx-drag-drop.metadata.json",
		"exports": {
		"./package.json": {
		"default": "./package.json"
		},
		".": {
		"types": "./ngx-drag-drop.d.ts",
		"esm2020": "./esm2020/ngx-drag-drop.mjs",
		"es2020": "./fesm2020/ngx-drag-drop.mjs",
		"es2015": "./fesm2015/ngx-drag-drop.mjs",
		"node": "./fesm2015/ngx-drag-drop.mjs",
		"default": "./fesm2020/ngx-drag-drop.mjs"
		}
		},
		"sideEffects": false
		}
		}

366

README.md

		@@ -1,364 +0,24 @@
		[![npm](https://img.shields.io/npm/v/ngx-drag-drop.svg)](https://www.npmjs.com/package/ngx-drag-drop)
		[![npm (next)](https://img.shields.io/npm/v/ngx-drag-drop/next.svg)](https://www.npmjs.com/package/ngx-drag-drop)
		[![NpmLicense](https://img.shields.io/npm/l/ngx-drag-drop.svg)](https://www.npmjs.com/package/ngx-drag-drop)
		[![GitHub issues](https://img.shields.io/github/issues/reppners/ngx-drag-drop.svg)](https://github.com/reppners/ngx-drag-drop/issues)
		[![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)
		# MyLib

		# NgxDragDrop
		This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.

		[_Demo_](https://reppners.github.io/ngx-drag-drop/) / [_StackBlitz Issue Template_](https://stackblitz.com/edit/ngx-drag-drop-issue-template)
		## Code scaffolding

		`npm install ngx-drag-drop --save`
		Run `ng generate component component-name --project my-lib` to generate a new component. You can also use `ng generate directive\|pipe\|service\|class\|guard\|interface\|enum\|module --project my-lib`.
		> Note: Don't forget to add `--project my-lib` or else it will be added to the default project in your `angular.json` file.

		Angular directives for declarative drag and drop using the HTML5 Drag-And-Drop API
		## Build

		* sortable lists by using placeholder element (vertical and horizontal)
		* nestable
		* dropzones optionally support external/native draggables (img, txt, file)
		* conditional drag/drop
		* typed drag/drop
		* utilize [EffectAllowed](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed)
		* custom CSS classes
		* touch support by using a [polyfill](#touch-support)
		* [AOT](https://angular.io/guide/aot-compiler) compatible
		Run `ng build my-lib` to build the project. The build artifacts will be stored in the `dist/` directory.

		Port of [angular-drag-drop-lists](https://github.com/marceljuenemann/angular-drag-and-drop-lists) but without the lists :wink:
		## Publishing

		This has `dropzones` though :+1:
		The idea is that the directive does not handle lists internally so the `dndDropzone` can be general purpose.
		After building your library with `ng build my-lib`, go to the dist folder `cd dist/my-lib` and run `npm publish`.

		## Running unit tests

		## Usage
		Run `ng test my-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).

		`app.component.html`
		```HTML
		<!--a draggable element-->
		<div [dndDraggable]="draggable.data"
		[dndEffectAllowed]="draggable.effectAllowed"
		[dndDisableIf]="draggable.disable"
		(dndStart)="onDragStart($event)"
		(dndCopied)="onDraggableCopied($event)"
		(dndLinked)="onDraggableLinked($event)"
		(dndMoved)="onDraggableMoved($event)"
		(dndCanceled)="onDragCanceled($event)"
		(dndEnd)="onDragEnd($event)">

		<!--if [dndHandle] is used inside dndDraggable drag can only start from the handle-->
		<div *ngIf="draggable.handle"
		dndHandle>HANDLE
		</div>

		draggable ({{draggable.effectAllowed}}) <span [hidden]="!draggable.disable">DISABLED</span>

		<!--optionally select a child element as drag image-->
		<div dndDragImageRef>DRAG_IMAGE</div>

		</div>
		## Further help

		<!--a dropzone-->
		<!--to allow dropping content that is not [dndDraggable] set dndAllowExternal to true-->
		<section dndDropzone
		(dndDragover)="onDragover($event)"
		(dndDrop)="onDrop($event)">

		dropzone

		<!--optional placeholder element for dropzone-->
		<!--will be removed from DOM on init-->
		<div style="border: 1px orangered solid; border-radius: 5px; padding: 15px;"
		dndPlaceholderRef>
		placeholder
		</div>

		</section>
		```

		`app.component`
		```JS
		import { Component } from '@angular/core';

		import { DndDropEvent } from 'ngx-drag-drop';

		@Component()
		export class AppComponent {

		draggable = {
		// note that data is handled with JSON.stringify/JSON.parse
		// only set simple data or POJO's as methods will be lost
		data: "myDragData",
		effectAllowed: "all",
		disable: false,
		handle: false
		};

		onDragStart(event:DragEvent) {

		console.log("drag started", JSON.stringify(event, null, 2));
		}

		onDragEnd(event:DragEvent) {

		console.log("drag ended", JSON.stringify(event, null, 2));
		}

		onDraggableCopied(event:DragEvent) {

		console.log("draggable copied", JSON.stringify(event, null, 2));
		}

		onDraggableLinked(event:DragEvent) {

		console.log("draggable linked", JSON.stringify(event, null, 2));
		}

		onDraggableMoved(event:DragEvent) {

		console.log("draggable moved", JSON.stringify(event, null, 2));
		}

		onDragCanceled(event:DragEvent) {

		console.log("drag cancelled", JSON.stringify(event, null, 2));
		}

		onDragover(event:DragEvent) {

		console.log("dragover", JSON.stringify(event, null, 2));
		}

		onDrop(event:DndDropEvent) {

		console.log("dropped", JSON.stringify(event, null, 2));
		}
		}
		```

		`app.module`

		```JS
		import { BrowserModule } from '@angular/platform-browser';
		import { NgModule } from '@angular/core';

		import { DndModule } from 'ngx-drag-drop';

		import { AppComponent } from './app.component';

		@NgModule({
		declarations: [
		AppComponent
		],
		imports: [
		BrowserModule,
		DndModule
		],
		providers: [],
		bootstrap: [AppComponent]
		})
		export class AppModule {
		}
		```

		## API

		```TS
		// https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect
		export type DropEffect = "move" \| "copy" \| "link" \| "none";

		// https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed
		export type EffectAllowed = DropEffect \| "copyMove" \| "copyLink" \| "linkMove" \| "all";
		```

		```TS
		export type DndDragImageOffsetFunction = ( event:DragEvent, dragImage:Element ) => { x:number, y:number };

		@Directive( {
		selector: "[dndDraggable]"
		} )
		export declare class DndDraggableDirective {

		// the data attached to the drag
		dndDraggable: any;

		// the allowed drop effect
		dndEffectAllowed: EffectAllowed;

		// optionally set the type of dragged data to restrict dropping on compatible dropzones
		dndType?: string;

		// conditionally disable the draggability
		dndDisableIf: boolean;
		dndDisableDragIf: boolean;

		// set a custom class that is applied while dragging
		dndDraggingClass: string = "dndDragging";

		// set a custom class that is applied to only the src element while dragging
		dndDraggingSourceClass: string = "dndDraggingSource";

		// set the class that is applied when draggable is disabled by [dndDisableIf]
		dndDraggableDisabledClass = "dndDraggableDisabled";

		// enables to set a function for calculating custom dragimage offset
		dndDragImageOffsetFunction:DndDragImageOffsetFunction = calculateDragImageOffset;

		// emits on drag start
		readonly dndStart: EventEmitter<DragEvent>;

		// emits on drag
		readonly dndDrag: EventEmitter<DragEvent>;

		// emits on drag end
		readonly dndEnd: EventEmitter<DragEvent>;

		// emits when the dragged item has been dropped with effect "move"
		readonly dndMoved: EventEmitter<DragEvent>;

		// emits when the dragged item has been dropped with effect "copy"
		readonly dndCopied: EventEmitter<DragEvent>;

		// emits when the dragged item has been dropped with effect "link"
		readonly dndLinked: EventEmitter<DragEvent>;

		// emits when the drag is canceled
		readonly dndCanceled: EventEmitter<DragEvent>;
		}
		```

		```TS
		export interface DndDropEvent {

		// the original drag event
		event: DragEvent;

		// the actual drop effect
		dropEffect: DropEffect;

		// true if the drag did not origin from a [dndDraggable]
		isExternal:boolean;

		// the data set on the [dndDraggable] that started the drag
		// for external drags use the event property which contains the original drop event as this will be undefined
		data?: any;

		// the index where the draggable was dropped in a dropzone
		// set only when using a placeholder
		index?: number;

		// if the dndType input on dndDraggable was set
		// it will be transported here
		type?: any;
		}

		@Directive( {
		selector: "[dndDropzone]"
		} )
		export declare class DndDropzoneDirective {

		// optionally restrict the allowed types
		dndDropzone?: string[];

		// set the allowed drop effect
		dndEffectAllowed: EffectAllowed;

		// conditionally disable the dropzone
		dndDisableIf: boolean;
		dndDisableDropIf: boolean;

		// if draggables that are not [dndDraggable] are allowed to be dropped
		// set to true if dragged text, images or files should be handled
		dndAllowExternal: boolean;

		// if its a horizontal list this influences how the placeholder position
		// is calculated
		dndHorizontal: boolean;

		// set the class applied to the dropzone
		// when a draggable is dragged over it
		dndDragoverClass: string = "dndDragover";

		// set the class applied to the dropzone
		// when the dropzone is disabled by [dndDisableIf]
		dndDropzoneDisabledClass = "dndDropzoneDisabled";

		// emits when a draggable is dragged over the dropzone
		readonly dndDragover: EventEmitter<DragEvent>;

		// emits on successful drop
		readonly dndDrop: EventEmitter<DndDropEvent>;
		}
		```

		## Touch support

		Install the `mobile-drag-drop` module available on npm.

		Add the following lines to your js code
		```JS
		import { polyfill } from 'mobile-drag-drop';
		// optional import of scroll behaviour
		import { scrollBehaviourDragImageTranslateOverride } from "mobile-drag-drop/scroll-behaviour";

		polyfill( {
		// use this to make use of the scroll behaviour
		dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride
		} );

		// workaround to make scroll prevent work in iOS Safari > 10
		try {
		window.addEventListener( "touchmove", function() { }, { passive: false } );
		}
		catch(e){}
		```

		For more info on the polyfill check it out on GitHub
		https://github.com/timruffles/mobile-drag-drop

		## Known issues

		### Firefox

		* Beware that Firefox does not support dragging on `<button>` elements.
		* `<button [dndDraggable]>` and `<button [dndHandler]>` won't work.
		* See https://bugzilla.mozilla.org/show_bug.cgi?id=568313


		## Why?

		HTML Drag-And-Drop API implementations are not behaving the same way across browsers.

		The directives contained in this module enable declarative drag and drop that "just works" across browsers in a consistent way.

		Credits go to the author and contributors of [angular-drag-drop-lists](https://github.com/marceljuenemann/angular-drag-and-drop-lists).

		## Maintenance

		This project was generated with [Angular CLI](https://github.com/angular/angular-cli).

		For the library build it uses [ng-packagr](https://github.com/dherges/ng-packagr).

		#### Edit Library

		* edit lib code
		* run `npm start` (currently needs to be re-run on every lib code change)

		#### Release Library

		* assure correct version is set in `package.json`
		* build library with `npm run build:lib`
		* publish library with `npm run publish:stable` (use `npm run publish:next` for pre-releases)

		#### Release Docs

		* build docs site with `npm run build:docs`
		* commit and push changes in `docs` to `master`


		---

		<p align="center">
		Made with :heart: &
		<a href="https://www.jetbrains.com/?from=ngx-drag-drop">
		<img align="center" alt="jetbrains" src="jetbrains.svg" width="120px" />
		</a>
		& :coffee:
		</p>
		To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

bundles/ngx-drag-drop.umd.js

bundles/ngx-drag-drop.umd.js.map

bundles/ngx-drag-drop.umd.min.js

bundles/ngx-drag-drop.umd.min.js.map

dnd-draggable.directive.d.ts

dnd-dropzone.directive.d.ts

dnd-handle.directive.d.ts

dnd-state.d.ts

dnd-types.d.ts

dnd-utils.d.ts

dnd.module.d.ts

esm2015/dnd-draggable.directive.js

esm2015/dnd-dropzone.directive.js

esm2015/dnd-handle.directive.js

esm2015/dnd-state.js

esm2015/dnd-types.js

esm2015/dnd-utils.js

esm2015/dnd.module.js

esm2015/ngx-drag-drop.js

esm2015/public_api.js

esm5/dnd-draggable.directive.js

esm5/dnd-dropzone.directive.js

esm5/dnd-handle.directive.js

esm5/dnd-state.js

esm5/dnd-types.js

esm5/dnd-utils.js

esm5/dnd.module.js

esm5/ngx-drag-drop.js

esm5/public_api.js

fesm2015/ngx-drag-drop.js

fesm2015/ngx-drag-drop.js.map

fesm5/ngx-drag-drop.js

fesm5/ngx-drag-drop.js.map

LICENSE

ngx-drag-drop.metadata.json

public_api.d.ts

ngx-drag-drop - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes