Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular2-draggable

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular2-draggable

<!-- Badges section here. --> [![npm](https://img.shields.io/npm/v/angular2-draggable.svg)][npm-badge-url] [![npm](https://img.shields.io/npm/dm/angular2-draggable.svg)][npm-badge-url] [![Build Status](https://github.com/xieziyu/angular2-draggable/actions

  • 16.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
20K
increased by3.41%
Maintainers
1
Weekly downloads
 
Created
Source

angular2-draggable

npm npm Build Status

Table of contents

Getting Started

angular2-draggable has angular directives that make the DOM element draggable and resizable.

  • ngDraggable

    • v16.x requires Angular >= 16
    • v2.x requires Angular >= 6
    • v1.5.0 requires Angular >= 4 && < 6
  • ngResizable

    • provided since v2.0, requires Angular >= 6

CHANGELOG

Installation

npm install angular2-draggable --save

Draggable

Please refer to the demo page.

  1. Firstly, import AngularDraggableModule in your app module (or any other proper angular module):

    import { AngularDraggableModule } from 'angular2-draggable';
    
    @NgModule({
      imports: [
        ...,
        AngularDraggableModule
      ],
      ...
    })
    export class AppModule { }
    
  2. Then: use ngDraggable directive to make the DOM element draggable.

    • Simple example:

      • html:
      <div ngDraggable>Drag me!</div>
      
    • Use [handle] to move parent element:

      • html:
      <div ngDraggable [handle]="DemoHandle" class="card">
        <div #DemoHandle class="card-header">I'm handle. Drag me!</div>
        <div class="card-block">You can't drag this block now!</div>
      </div>
      

Resizable

Please refer to the demo page.

Besides of importing AngularDraggableModule, you need to import resizable.min.css in your project. If you use angular-cli, you can add this in angular.json:

"styles": [
    ...
+   "node_modules/angular2-draggable/css/resizable.min.css"
]

Then you can use ngResizable directive to make the element resizable:

<div ngResizable> I'm now resizable </div>

<div [ngResizable]="false"> Resizable is disabled now </div>

<div ngResizable [rzHandles]="'n,e,s,w,se,sw,ne,nw'"> Each side is resizable </div>

Well you can use both directives concurrently if you wish:

<div ngDraggable ngResizable> I'm now draggable and resizable </div>

API

Directive:

  • ngDraggable directive support following input porperties:

    InputTypeDefaultDescription
    ngDraggablebooleantrueYou can toggle the draggable capability by setting true or false
    handleHTMLElementnullUse template variable to refer to the handle element. Then only the handle element is draggable
    zIndexstringnullUse it to set z-index property when element is not moving
    zIndexMovingstringnullUse it to set z-index property when element is moving
    boundsHTMLElemntnullUse it to set the boundary
    inBoundsbooleanfalseUse it make element stay in the bounds
    outOfBounds{ top: boolean; bottom: boolean; right: boolean; left: boolean }falseSet it to allow element get out of bounds from the direction. Refer to demo
    position{ x: number, y: number }{ x:0, y:0 }Use it to set position offset
    gridSizenumber1Use it for snapping to grid. Refer to demo
    preventDefaultEventbooleanfalseWhether to prevent default mouse event
    scalenumber1Set it when parent element has CSS transform scale
    lockAxis'x' | 'y'nullRestrict dragging to a specific axis by locking another one
  • ngResizable directive support following input porperties:

    InputTypeDefaultDescription
    ngResizablebooleantrueYou can toggle the resizable capability by setting true or false
    rzHandlesstring"e,s,se"Which handles can be used for resizing. Optional types in "n,e,s,w,se,sw,ne,nw" or "all"
    rzAspectRatioboolean | numberfalseboolean: Whether the element should be constrained to a specific aspect ratio. number: Force the element to maintain a specific aspect ratio during resizing (width/height)
    rzContainmentSelector | string | ElementnullConstrains resizing to within the bounds of the specified element or region. It accepts an HTMLElement, 'parent' or a valid CSS selector string such as '#id'
    rzGridnumber | number[]1Snaps the resizing element to a grid, every x and y pixels. Array values: [x, y]
    rzMinWidthnumber1The minimum width the resizable should be allowed to resize to.
    rzMaxWidthnumber1The maximum width the resizable should be allowed to resize to.
    rzMinHeightnumber1The minimum height the resizable should be allowed to resize to.
    rzMaxHeightnumber1The maximum height the resizable should be allowed to resize to.
    preventDefaultEventbooleanfalseWhether to prevent default mouse event.
    rzScalenumber1Set it when parent element has CSS transform scale

CSS:

  • When ngDraggable is enabled on some element, ng-draggable and ng-dragging class is automatically toggled on it. You can use it to customize the pointer style. For example:

    .ng-draggable {
      cursor: grab;
    }
    
    .ng-dragging {
      cursor: grabbing;
    }
    
  • When ngResizable is enabled on some element, ng-resizable class is automatically assigned to it. And handle elements will be created with ng-resizable-handle. You can customize the handle style.

Events

  • ngDraggable directive:

    Output$eventDescription
    startednativeElement of hostemitted when start dragging
    stoppednativeElement of hostemitted when stop dragging
    edge{ top: boolean, right: boolean, bottom: boolean, left: boolean }emitted after [bounds] is set
    movingOffset{ x: number, y: number }emit position offset when moving
    endOffset{ x: number, y: number }emit position offset when stop moving

    Simple example:

    <div ngDraggable
      (started)="onDragBegin($event)"
      (stopped)="onDragEnd($event)"
      (movingOffset)="onMoving($event)"
      (endOffset)="onMoveEnd($event)">
      Drag me!
    </div>
    
  • ngResizable directive:

    Output$eventdescription
    rzStartIResizeEventemitted when start resizing
    rzResizingIResizeEventemitted when resizing
    rzStopIResizeEventemitted when stop resizing
    export interface IResizeEvent {
      host: any;
      handle: any;
      size: {
        width: number;
        height: number;
      };
      position: {
        top: number;
        left: number;
      };
      direction: {
        n: boolean;
        s: boolean;
        w: boolean;
        e: boolean;
      };
    }
    

    Simple example:

    <div ngResizable
      (rzStart)="onResizeStart($event)"
      (rzResizing)="onResizing($event)"
      (rzStop)="onResizeStop($event)">
      Resizable
    </div>
    

Demo

You can clone this repo to your working copy and then launch the demo page in your local machine:

npm install
npm run demo

# or
yarn install
yarn demo

The demo page server is listening to: http://localhost:4203

Keywords

FAQs

Package last updated on 20 May 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc