{"id":13406724,"url":"https://github.com/xieziyu/angular2-draggable","last_synced_at":"2025-10-24T21:37:07.498Z","repository":{"id":37692765,"uuid":"90095739","full_name":"xieziyu/angular2-draggable","owner":"xieziyu","description":"Angular directive (for version \u003e= 2.x ) that makes the DOM element draggable and resizable","archived":false,"fork":false,"pushed_at":"2024-12-05T04:29:31.000Z","size":3071,"stargazers_count":294,"open_issues_count":115,"forks_count":104,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-29T20:01:37.790Z","etag":null,"topics":["angular","deprecated-repo","draggable","ngdraggable","ngresizable","resizable","resize"],"latest_commit_sha":null,"homepage":"https://xieziyu.github.io/angular2-draggable/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xieziyu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-03T01:40:58.000Z","updated_at":"2025-02-23T20:28:35.000Z","dependencies_parsed_at":"2024-06-18T12:37:26.395Z","dependency_job_id":"73f1304d-2b52-418b-8ae3-f8c889a2646d","html_url":"https://github.com/xieziyu/angular2-draggable","commit_stats":{"total_commits":118,"total_committers":26,"mean_commits":4.538461538461538,"dds":"0.43220338983050843","last_synced_commit":"6143a2b1b589cc934d8663dd15ac001b6f3c0e44"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieziyu%2Fangular2-draggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieziyu%2Fangular2-draggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieziyu%2Fangular2-draggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieziyu%2Fangular2-draggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xieziyu","download_url":"https://codeload.github.com/xieziyu/angular2-draggable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247550672,"owners_count":20956985,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","deprecated-repo","draggable","ngdraggable","ngresizable","resizable","resize"],"created_at":"2024-07-30T19:02:37.623Z","updated_at":"2025-10-24T21:37:02.460Z","avatar_url":"https://github.com/xieziyu.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# angular2-draggable\n\n\u003c!-- Badges section here. --\u003e\n[![npm](https://img.shields.io/npm/v/angular2-draggable.svg)][npm-badge-url]\n[![npm](https://img.shields.io/npm/dm/angular2-draggable.svg)][npm-badge-url]\n[![Build Status](https://github.com/xieziyu/angular2-draggable/actions/workflows/ci.yaml/badge.svg)][ci-url]\n\n+ [Online Demo](https://xieziyu.github.io/angular2-draggable)\n+ [Online Docs](https://xieziyu.github.io/angular2-draggable/api-doc)\n\n## Table of contents \n- [angular2-draggable](#angular2-draggable)\n  - [Table of contents](#table-of-contents)\n- [Getting Started](#getting-started)\n- [Installation](#installation)\n- [Draggable](#draggable)\n- [Resizable](#resizable)\n- [API](#api)\n  - [Directive:](#directive)\n  - [CSS:](#css)\n- [Events](#events)\n- [Demo](#demo)\n\n# Getting Started\nangular2-draggable has angular directives that make the DOM element draggable and resizable.\n+ `ngDraggable`\n    + v16.x requires Angular \u003e= 16\n    + v2.x requires Angular \u003e= 6\n    + v1.5.0 requires Angular \u003e= 4 \u0026\u0026 \u003c 6\n\n+ `ngResizable`\n    + provided since v2.0, requires Angular \u003e= 6\n\n[CHANGELOG](./CHANGELOG.md)\n\n# Installation\n```\nnpm install angular2-draggable --save\n```\n\n# Draggable\nPlease refer to the [demo](https://xieziyu.github.io/angular2-draggable) page.\n\n1. Firstly, import `AngularDraggableModule` in your app module (or any other proper angular module):\n    ```typescript\n    import { AngularDraggableModule } from 'angular2-draggable';\n\n    @NgModule({\n      imports: [\n        ...,\n        AngularDraggableModule\n      ],\n      ...\n    })\n    export class AppModule { }\n    ```\n\n2. Then: use `ngDraggable` directive to make the DOM element draggable.\n    + Simple example:\n\n      + html:\n      ```html\n      \u003cdiv ngDraggable\u003eDrag me!\u003c/div\u003e\n      ```\n\n    + Use `[handle]` to move parent element:\n\n      + html:\n      ```html\n      \u003cdiv ngDraggable [handle]=\"DemoHandle\" class=\"card\"\u003e\n        \u003cdiv #DemoHandle class=\"card-header\"\u003eI'm handle. Drag me!\u003c/div\u003e\n        \u003cdiv class=\"card-block\"\u003eYou can't drag this block now!\u003c/div\u003e\n      \u003c/div\u003e\n      ```\n\n# Resizable\nPlease refer to the [demo](https://xieziyu.github.io/angular2-draggable/#/resizable/default) page.\n\nBesides 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`:\n\n```diff\n\"styles\": [\n    ...\n+   \"node_modules/angular2-draggable/css/resizable.min.css\"\n]\n```\n\nThen you can use `ngResizable` directive to make the element resizable:\n```html\n\u003cdiv ngResizable\u003e I'm now resizable \u003c/div\u003e\n\n\u003cdiv [ngResizable]=\"false\"\u003e Resizable is disabled now \u003c/div\u003e\n\n\u003cdiv ngResizable [rzHandles]=\"'n,e,s,w,se,sw,ne,nw'\"\u003e Each side is resizable \u003c/div\u003e\n```\n\nWell you can use both directives concurrently if you wish:\n```html\n\u003cdiv ngDraggable ngResizable\u003e I'm now draggable and resizable \u003c/div\u003e\n```\n\n# API\n\n## Directive:\n+ `ngDraggable` directive support following input porperties:\n\n    | Input | Type | Default | Description |\n    | ----- | ---- | ------- | ----------- |\n    | ngDraggable | boolean | `true` | You can toggle the draggable capability by setting `true` or `false` |\n    | handle | HTMLElement | null | Use template variable to refer to the handle element. Then only the handle element is draggable |\n    | zIndex | string | null | Use it to set z-index property when element is not moving |\n    | zIndexMoving | string | null | Use it to set z-index property when element is moving |\n    | bounds | HTMLElemnt | null | Use it to set the boundary |\n    | inBounds | boolean | `false` | Use it make element stay in the bounds |\n    | outOfBounds | `{ top: boolean; bottom: boolean; right: boolean; left: boolean }` | `false` | Set it to allow element get out of bounds from the direction. Refer to [demo](https://xieziyu.github.io/angular2-draggable/#/usage/boundary) |\n    | position | `{ x: number, y: number }` | `{ x:0, y:0 }` | Use it to set position offset |\n    | gridSize | number | 1 | Use it for snapping to grid. Refer to [demo](https://xieziyu.github.io/angular2-draggable/#/advance/snap-grid) |\n    | preventDefaultEvent | boolean | `false` | Whether to prevent default mouse event |\n    | scale | number | 1 | Set it when parent element has CSS transform scale |\n    | lockAxis | `'x' \\| 'y'` | null | Restrict dragging to a specific axis by locking another one |\n  \n+ `ngResizable` directive support following input porperties:\n\n    | Input | Type | Default | Description |\n    | ----- | ---- | ------- | ----------- |\n    | ngResizable | boolean | `true` | You can toggle the resizable capability by setting `true` or `false` |\n    | rzHandles | string | `\"e,s,se\"` | Which handles can be used for resizing. Optional types in `\"n,e,s,w,se,sw,ne,nw\"` or `\"all\"` |\n    | rzAspectRatio | boolean \\| number | `false` | `boolean`: 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) |\n    | rzContainment | Selector \\| string \\| Element | null | Constrains 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' |\n    | rzGrid | number \\| number[] | 1 | Snaps the resizing element to a grid, every x and y pixels. Array values: `[x, y]`|\n    | rzMinWidth | number | 1 | The minimum width the resizable should be allowed to resize to. |\n    | rzMaxWidth | number | 1 | The maximum width the resizable should be allowed to resize to. |\n    | rzMinHeight | number | 1 | The minimum height the resizable should be allowed to resize to. |\n    | rzMaxHeight | number | 1 | The maximum height the resizable should be allowed to resize to. |\n    | preventDefaultEvent | boolean | `false` | Whether to prevent default mouse event. |\n    | rzScale | number | 1 | Set it when parent element has CSS transform scale |\n\n## CSS:\n+ 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:\n\n    ```css\n    .ng-draggable {\n      cursor: grab;\n    }\n\n    .ng-dragging {\n      cursor: grabbing;\n    }\n    ```\n\n+ 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.\n\n# Events\n+ `ngDraggable` directive:\n\n    | Output | $event | Description |\n    | ------ | ------ | ----------- |\n    | started | `nativeElement` of host | emitted when start dragging |\n    | stopped | `nativeElement` of host | emitted when stop dragging |\n    | edge | { top: boolean, right: boolean, bottom: boolean, left: boolean } | emitted after `[bounds]` is set |\n    | movingOffset | { x: number, y: number } | emit position offset when moving |\n    | endOffset | { x: number, y: number } | emit position offset when stop moving |\n\n    Simple example:\n    ```html\n    \u003cdiv ngDraggable\n      (started)=\"onDragBegin($event)\"\n      (stopped)=\"onDragEnd($event)\"\n      (movingOffset)=\"onMoving($event)\"\n      (endOffset)=\"onMoveEnd($event)\"\u003e\n      Drag me!\n    \u003c/div\u003e\n    ```\n\n+ `ngResizable` directive:\n\n    | Output | $event | description |\n    | ------ | ------ | ----------- |\n    | rzStart | `IResizeEvent` | emitted when start resizing |\n    | rzResizing | `IResizeEvent` | emitted when resizing |\n    | rzStop | `IResizeEvent` | emitted when stop resizing |\n\n    ```typescript\n    export interface IResizeEvent {\n      host: any;\n      handle: any;\n      size: {\n        width: number;\n        height: number;\n      };\n      position: {\n        top: number;\n        left: number;\n      };\n      direction: {\n        n: boolean;\n        s: boolean;\n        w: boolean;\n        e: boolean;\n      };\n    }\n    ```\n\n    Simple example:\n    ```html\n    \u003cdiv ngResizable\n      (rzStart)=\"onResizeStart($event)\"\n      (rzResizing)=\"onResizing($event)\"\n      (rzStop)=\"onResizeStop($event)\"\u003e\n      Resizable\n    \u003c/div\u003e\n    ```\n\n# Demo\nYou can clone this repo to your working copy and then launch the demo page in your local machine:\n```bash\nnpm install\nnpm run demo\n\n# or\nyarn install\nyarn demo\n```\nThe demo page server is listening to: http://localhost:4203\n\n\n[npm-badge-url]: https://www.npmjs.com/package/angular2-draggable\n[ci-url]: https://github.com/xieziyu/angular2-draggable/actions/workflows/ci.yaml\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxieziyu%2Fangular2-draggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxieziyu%2Fangular2-draggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxieziyu%2Fangular2-draggable/lists"}