# ngx-draggable-resizer

> A light-weight jquery-ui based directive in Angular for resizing and dragging elements.

Latest version **1.0.4** (published 2019-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-draggable-resizer
pnpm add ngx-draggable-resizer
yarn add ngx-draggable-resizer
bun add ngx-draggable-resizer
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-05-08 |
| First published | 2019-01-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 55.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Senal Kumarage |
| Maintainers | senal |
| Keywords | draggable, resizer, angular, angular7, jquery, jquery-ui |

## Links

- npm: https://www.npmjs.com/package/ngx-draggable-resizer
- Repository: https://github.com/SenalKumarage/ngx-draggable-resizer
- Issues: https://github.com/SenalKumarage/ngx-draggable-resizer/issues
- npm.io page: https://npm.io/package/ngx-draggable-resizer

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2019-05-08
- 1.0.3 — 2019-01-27
- 1.0.2 — 2019-01-26
- 1.0.1 — 2019-01-26
- 1.0.0 — 2019-01-26
- 0.0.4 — 2019-01-23
- 0.0.3 — 2019-01-23
- 0.0.2 — 2019-01-23
- 0.0.1 — 2019-01-22

## README

# ngx-draggable-resizer

A light-weight jquery-ui based directive in Angular for resizing and dragging elements. 

DEMO: https://senalkumarage.github.io/ngx-draggable-resizer-demo/

## Features
- Element resize
- Element drag
- OnPositionChange event listener
- OnSizeChange event listener

## Dependencies
- Angular 7.x
- jquery 3.x
- jquery-ui 1.x

## Install
```bash
npm install ngx-draggable-resizer --save
```

## Setup
- **Step 1:** Importing the module
```typescript
import { CommonModule } from '@angular/common';

import { NgxDraggableResizerModule } from 'ngx-draggable-resizer';

@NgModule({
  imports: [
    CommonModule,
    NgxDraggableResizerModule // NgxDraggableResizerModule added
  ],
  bootstrap: [App],
  declarations: [App]
})
class MainModule {}
```
- **Step 2:** Adding styles
    - If you are using sass you can import the css
    ```scss
    // regular style toast
    @import '~ngx-draggable-resizer/css/ngx-draggable-resizer.css';
    ```
    - Or if you are using angular-cli you can add this to your angular.json
    ```ts
    "styles": [
        "styles.scss",
        "./node_modules/ngx-draggable-resizer/css/ngx-draggable-resizer.css"
    ]
    ```
- **Step 3:** Including jQuery
    - This step is not relevant if you have already setup jQuery in your project
    - In your `angular.json` file
    ```json
    "scripts": [
        "./node_modules/jquery/dist/jquery.min.js"
    ]
    ```
## Usage
```html
<div draggableResizer style="background:red;width: 100px;height: 100px;"></div>
```
## Options

| Option        | Type    | Default | Description                             |
| ------------- | ------- | ------- | --------------------------------------- |
| draggableOnly | boolean | false   | Whether the element can only be dragged |
| resizableOnly | boolean | false   | Whether the element can only be resized |

## Events

| Name           | Description                            | Returns                           |
| -------------- | -------------------------------------- | --------------------------------- |
| sizeChanged    | Triggers when the element gets resized | `{width: number, height: number}` |
| positionChange | Triggers when the element gets moved   | `{top: string, left: string}`     |

## License
MIT

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