/ngx-draggable-resizer

Draggable resizer directive for angular

Primary LanguageTypeScriptMIT LicenseMIT

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}

License

MIT