Ngx-draggable-resizer NPM

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

npm install ngx-draggable-resizer --save

Setup

Step 1: Importing the module

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

// 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

"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
```
"scripts": [
    "./node_modules/jquery/dist/jquery.min.js"
]
```

Usage

<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}`