# ng2-draggable-dom

> ## Table of contents 1. [About This Package](#about-this-package) 2. [Latest News](#latest-news) 3. [Installation](#installation) 4. [Usage](#usage) 5. [API](#api)

Latest version **1.2.4** (published 2019-02-15) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ng2-draggable-dom
pnpm add ng2-draggable-dom
yarn add ng2-draggable-dom
bun add ng2-draggable-dom
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.4 |
| Published | 2019-02-15 |
| First published | 2017-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 109.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Brian Martinson |
| Maintainers | bmartinson |
| Keywords | angular, 2, 4, 5, draggable, ng, ng2 |

## Links

- npm: https://www.npmjs.com/package/ng2-draggable-dom
- Repository: https://github.com/bmartinson/ng2-draggable-dom
- Homepage: https://github.com/bmartinson/ng2-draggable-dom#readme
- Issues: https://github.com/bmartinson/ng2-draggable-dom/issues
- npm.io page: https://npm.io/package/ng2-draggable-dom

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 1.2.4 (latest) — 2019-02-15
- 1.2.2 — 2019-02-14
- 1.2.1 — 2018-01-11
- 1.2.0 — 2017-12-14
- 1.1.2 — 2017-12-13
- 1.1.1 — 2017-12-13
- 1.1.0 — 2017-12-13
- 1.0.0 — 2017-12-13
- 1.0.0-rc4 — 2017-12-13
- 1.0.0-rc3 — 2017-12-13
- 1.0.0-rc2 — 2017-12-12
- 1.0.0-rc1 — 2017-12-12

## README

# ng2-draggable-dom [![npm version](https://badge.fury.io/js/ng2-draggable-dom.svg)](http://badge.fury.io/js/ng2-draggable-dom) [![npm downloads](https://img.shields.io/npm/dm/ng2-draggable-dom.svg)](https://npmjs.org/ng2-draggable-dom)

Deprecated draggable DOM element directive. Keep on the look out for a new ngx version.

## Table of contents
1. [About This Package](#about-this-package)
2. [Latest News](#latest-news)
3. [Installation](#installation)
4. [Usage](#usage)
5. [API](#api)

## About This Package
ng2-draggable-dom is a directive for Angular 2+ that makes any DOM element draggable. This project began as a fork of the [angular2-draggable](https://github.com/xieziyu/angular2-draggable) directive by [xieziyu](https://github.com/xieziyu) and was created to provide a more robust set of features and to keep package releases on the bleeding edge.

There are long term plans for major enhancements to this package, so stay tuned and please report any issues you have with existing functionality.

## Latest News
Always check the [CHANGELOG](https://github.com/bmartinson/ng2-draggable-dom/blob/master/CHANGELOG.md) for what's brand new and for all the gooey details! See the top of this readme to see what the current version of this module is.

### 2019.02.14:
+ This update is the final release to stabilize the ng2 directive version of this module. Please be on the look out for the ngx titled version that will be created using the Ng7 CLI tools for libraries.

### 2018.01.11:
+ Republished the module to finish a migration of accounts on GitHub and NPM. No functional changes have been made and no known bugs are present in v1.2.1. Happy New Year and stay tuned for future upgrades!

### 2017.12.13:
+ Critical bug fixes and enhancements have been made for full bounds constrain support.

### 2017.12.12:
+ The fork was renamed ng2-draggable-dom to be published as a new npm package.
+ Critical bug fixes and enhancements have been made.

## Installation
```npm install ng2-draggable-dom --save```

## Usage
1. Import `DraggableDomModule` in your app module (or other proper angular module) and place it in your imports section:

    ```typescript
    import { DraggableDomModule } from "ng2-draggable-dom";

    @NgModule({
       imports: [
         ...,
         DraggableDomModule,
       ],
       ...
    })
    export class AppModule { }
	  ```

2. Use the `ngDraggable` directive to make a DOM element draggable.

	```html
	<div ngDraggable>Drag me!</div>
	```

3. Explore the API of inputs and outputs to help make your element drag just the way you would like!

## API

### Input Properties

`ngDraggable` {boolean}
+ `true`: the element can be dragged.
+ `false`: the element cannot be dragged.

`handle` {HTMLElement}
+ `{HTMLElement}`: The element that should be used as the selectable region to drag.

`bounds` {HTMLElement}
+ `{HTMLElement}`: The element that represents the region the entire draggable element should be kept within. Note, by setting this property you are not forcing it to be constrained within the bounds.

`constrainByBounds` {boolean}
+ `true`: if `bounds` is set, the draggable element will be constrained by that HTMLElement.
+ `false` (default): if `bounds` is set, the draggable element will just report which boundary edge has been passed by in the `edge` output emitter.

### Output Emitters

`started` {target: nativeElement, position: IPosition} as {IMoveEvent} (exported interface):
+ Emits the nativeElement that is being dragged in `$event.target`.
+ Emits the current translation in `$event.position` as an `IPosition {x, y}`.

`stopped` {target: nativeElement, position: IPosition} as {IMoveEvent} (exported interface):
+ Emits the nativeElement that is being dragged in `$event.target`.
+ Emits the current translation in `$event.position` as an `IPosition {x, y}`.

`moved` {target: nativeElement, position: IPosition} as {IMoveEvent} (exported interface):
+ Emits the nativeElement that is being dragged in `$event.target`.
+ Emits the current translation in `$event.position` as an `IPosition {x, y}`.

`edge` {top: boolean, right: boolean, bottom: boolean, left: boolean} as IBounds (exported interface):
+ If `bounds` is set, this output will emit an object defining the state of constraint for each edge of the HTMLElement defined by `bounds`.

### Public Functions

`reset()` {void}:
+ Call this function on a reference to the directive in TypeScript code to request that the directive be reset to a default state. This is useful for when the draggable element has its location programmatically adjusted such that subsequent drags should not remember past translations that may affect future placement.

####  CSS
When `ngDraggable` is enabled on some element, the `ng-draggable` class is automatically assigned to it. You can use it to customize it. For example, change the cursor style for draggable elements in your page by doing the following:

```css
.ng-draggable {
  cursor: move;
}
```

---
_Source: https://npm.io/package/ng2-draggable-dom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._