├── .gitignore
├── .npmignore
├── LICENSE
├── Readme.md
├── make.js
├── package.json
├── src
├── draggable.directive.ts
├── draggable.module.ts
└── tsconfig.json
└── tslinst.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # compiled output
2 | /bundles
3 | /dist
4 | /tmp
5 | /.tmp
6 |
7 | # dependencies
8 | /node_modules
9 | /bower_components
10 |
11 | # IDEs and editors
12 | /.idea
13 | /.vscode
14 | .project
15 | .classpath
16 | .c9/
17 | *.launch
18 | .settings/
19 |
20 | # misc
21 | /.sass-cache
22 | /connect.lock
23 | /coverage/*
24 | /libpeerconnection.log
25 | npm-debug.log
26 | testem.log
27 | /typings
28 |
29 | # e2e
30 | /e2e/*.js
31 | /e2e/*.map
32 |
33 | #System Files
34 | .DS_Store
35 | Thumbs.db
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | make.js
2 | # compiled output
3 | /.tmp
4 | /src
5 |
6 | /Architecture.md
7 | # dependencies
8 | /node_modules
9 | /bower_components
10 |
11 | # IDEs and editors
12 | /.idea
13 | /.vscode
14 | .project
15 | .classpath
16 | .c9/
17 | *.launch
18 | .settings/
19 | tslint.json
20 | .editorconfig
21 |
22 |
23 | # misc
24 | /.sass-cache
25 | /connect.lock
26 | /coverage/*
27 | /libpeerconnection.log
28 | npm-debug.log
29 | testem.log
30 | /typings
31 |
32 | # e2e
33 | /e2e/*.js
34 | /e2e/*.map
35 |
36 | #System Files
37 | .DS_Store
38 | Thumbs.db
39 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Ajay Singh
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
1 | # Angular-Draggable
2 | A angular directive provide html block to move on html plain.
3 |
4 | ## Usages
5 |
6 | ```js
7 | import { NgDraggableModule } from 'angular-draggable';
8 | @NgModule({
9 | imports: [
10 | ....,
11 | NgDraggableModule
12 | ],
13 | declarations: [YourAppComponent ],
14 | exports: [YourAppComponent],
15 | bootstrap: [YourAppComponent],
16 | })
17 | .....
18 |
19 |
20 | ```
21 |
22 | ```html
23 |
24 | content
25 |
26 |
27 | ```
28 |
29 |
30 | ```html
31 |
32 | content
33 |
34 |
35 | ```
36 |
37 | ```html
38 |
39 | content
40 |
41 |
42 | ```
43 | # Example
44 | [#demo](https://coderajay.github.io/angular-draggable)
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/make.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var Builder = require('systemjs-builder');
3 | var name = 'draggable.module';
4 |
5 | var builder = new Builder();
6 | var config = {
7 | baseURL: './dist',
8 | transpiler: 'typescript',
9 | typescriptOptions: {
10 | module: 'cjs'
11 | },
12 | map: {
13 | typescript: path.resolve('./node_modules/typescript/lib/typescript.js'),
14 | '@angular': path.resolve('./node_modules/@angular'),
15 | rxjs: path.resolve('./node_modules/rxjs')
16 | },
17 | paths:{
18 | '*':'*.js',
19 | 'utils/*':'utils/*.js',
20 | 'node_modules/*': './node_modules/*'
21 | },
22 | meta: {
23 | './node_modules/@angular/*': { build: false },
24 | './node_modules/rxjs/*': { build: false }
25 | },
26 | };
27 |
28 | builder.config(config);
29 |
30 | builder
31 | .bundle(name, path.resolve(__dirname, './bundles/', name + '.js'))
32 | .then(function() {
33 | console.log('Build complete.');
34 | })
35 | .catch(function(err) {
36 | console.log('Error', err);
37 | });
38 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-draggable",
3 | "version": "1.0.1",
4 | "description": "Angular directive draggable.",
5 | "main": "dist/draggable.module.js",
6 | "typings": "dist/draggable.module.d.ts",
7 | "scripts": {
8 | "compile": "node ./node_modules/@angular/compiler-cli/src/main.js -p src/",
9 | "prepublish": "npm run clean && npm run compile && rm -rf dist/node_modules && npm run build",
10 | "clean": "rm -rf dist && rm -rf bundles",
11 | "build": "node make.js"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "git+https://github.com/CoderAjay/angular-draggable.git"
16 | },
17 | "keywords": [
18 | "Angular-draggable",
19 | "ng draggable directive",
20 | "draggable directive",
21 | "directive",
22 | "Angular"
23 | ],
24 | "author": "Ajay Singh (meajaysingh@hotmail.com)",
25 | "license": "MIT",
26 | "bugs": {
27 | "url": "https://github.com/CoderAjay/angular-draggable/issues"
28 | },
29 | "homepage": "https://github.com/CoderAjay/angular-draggable#readme",
30 | "dependencies": {},
31 | "peerDependencies": {
32 | "@angular/core": "^2.4.10",
33 | "rxjs": "^5.0.0-beta.12",
34 | "zone.js": "^0.6.23"
35 | },
36 | "devDependencies": {
37 | "@angular/common": "^2.4.10",
38 | "@angular/compiler": "^2.4.10",
39 | "@angular/compiler-cli": "^2.4.10",
40 | "@angular/core": "^2.4.10",
41 | "rxjs": "^5.0.0-beta.12",
42 | "systemjs-builder": "^0.16.4",
43 | "tslint": "3.13.0",
44 | "typescript": "~2.0.3",
45 | "zone.js": "^0.6.23"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/draggable.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ElementRef, Renderer, OnDestroy, OnInit, AfterViewInit, Input } from '@angular/core';
2 |
3 |
4 | @Directive({
5 | selector: '[draggable]',
6 | host: {
7 | '(dragstart)': 'onDragStart($event)',
8 | '(dragend)': 'onDragEnd($event)',
9 | '(drag)': 'onDrag($event)'
10 | }
11 | })
12 | export class DraggableDirective implements OnDestroy, OnInit, AfterViewInit {
13 | private Δx: number = 0;
14 | private Δy: number = 0;
15 |
16 | private canDrag:boolean = true;
17 |
18 | @Input('draggable')
19 | set draggable(val:any){
20 | if(val === undefined || val === null || val === '' ) return;
21 | this.canDrag = !!val;
22 | }
23 | private mustBePosition: Array = ['absolute', 'fixed', 'relative'];
24 | constructor(
25 | private el: ElementRef, private renderer: Renderer
26 | ) {
27 |
28 | }
29 |
30 | ngOnInit(): void {
31 | this.renderer.setElementAttribute(this.el.nativeElement, 'draggable', 'true');
32 | }
33 | ngAfterViewInit(){
34 | try {
35 | let position = window.getComputedStyle(this.el.nativeElement).position;
36 | if (this.mustBePosition.indexOf(position) === -1) {
37 | console.warn( this.el.nativeElement, 'Must be having position attribute set to ' + this.mustBePosition.join('|'));
38 | }
39 | } catch (ex) {
40 | console.error(ex);
41 | }
42 | }
43 | ngOnDestroy(): void {
44 | this.renderer.setElementAttribute(this.el.nativeElement, 'draggable', 'false');
45 | }
46 |
47 | onDragStart(event: MouseEvent) {
48 | this.Δx = event.x - this.el.nativeElement.offsetLeft;
49 | this.Δy = event.y - this.el.nativeElement.offsetTop;
50 | }
51 |
52 | onDrag(event: MouseEvent) {
53 | this.doTranslation(event.x, event.y);
54 | }
55 |
56 | onDragEnd(event: MouseEvent) {
57 | this.Δx = 0;
58 | this.Δy = 0;
59 | }
60 |
61 | doTranslation(x: number, y: number) {
62 | if (!x || !y) return;
63 | this.renderer.setElementStyle(this.el.nativeElement, 'top', (y - this.Δy) + 'px');
64 | this.renderer.setElementStyle(this.el.nativeElement, 'left', (x - this.Δx) + 'px');
65 | }
66 |
67 |
68 | }
--------------------------------------------------------------------------------
/src/draggable.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { DraggableDirective } from './draggable.directive';
4 | @NgModule({
5 | imports: [],
6 | declarations: [ DraggableDirective ],
7 | exports: [ DraggableDirective ],
8 | providers: []
9 | })
10 | export class NgDraggableModule { }
11 |
--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "noImplicitAny": true,
4 | "module": "commonjs",
5 | "target": "es5",
6 | "emitDecoratorMetadata": true,
7 | "experimentalDecorators": true,
8 | "inlineSourceMap": true,
9 | "inlineSources": true,
10 | "declaration": true,
11 | "suppressImplicitAnyIndexErrors": true,
12 | "removeComments": true,
13 | "moduleResolution": "node",
14 | "lib": [
15 | "dom",
16 | "es6"
17 | ],
18 | "outDir": "../dist",
19 | "typeRoots": [
20 | "../node_modules/@types"
21 | ]
22 | },
23 | "exclude": [
24 | "../node_modules",
25 | "../dist"
26 | ],
27 | "awesomeTypescriptLoaderOptions": {
28 | "forkChecker": true,
29 | "useWebpackText": true
30 | },
31 | "angularCompilerOptions": {
32 | "genDir": "../dist",
33 | "debug": false
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/tslinst.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "class-name": true,
7 | "comment-format": [
8 | true,
9 | "check-space"
10 | ],
11 | "curly": true,
12 | "eofline": true,
13 | "forin": true,
14 | "indent": [
15 | true,
16 | "spaces"
17 | ],
18 | "label-position": true,
19 | "label-undefined": true,
20 | "max-line-length": [
21 | true,
22 | 200
23 | ],
24 | "member-access": false,
25 | "member-ordering": [
26 | true,
27 | "static-before-instance",
28 | "variables-before-functions"
29 | ],
30 | "no-arg": true,
31 | "no-bitwise": true,
32 | "no-console": [
33 | true,
34 | "debug",
35 | "info",
36 | "time",
37 | "timeEnd",
38 | "trace"
39 | ],
40 | "no-construct": true,
41 | "no-debugger": true,
42 | "no-duplicate-key": true,
43 | "no-duplicate-variable": true,
44 | "no-empty": false,
45 | "no-eval": true,
46 | "no-inferrable-types": true,
47 | "no-shadowed-variable": true,
48 | "no-string-literal": false,
49 | "no-switch-case-fall-through": true,
50 | "no-trailing-whitespace": true,
51 | "no-unused-expression": true,
52 | "no-unused-variable": true,
53 | "no-unreachable": true,
54 | "no-use-before-declare": true,
55 | "no-var-keyword": true,
56 | "object-literal-sort-keys": false,
57 | "one-line": [
58 | true,
59 | "check-open-brace",
60 | "check-catch",
61 | "check-else",
62 | "check-whitespace"
63 | ],
64 | "quotemark": [
65 | true,
66 | "single"
67 | ],
68 | "radix": true,
69 | "semicolon": [
70 | "always"
71 | ],
72 | "triple-equals": [
73 | true,
74 | "allow-null-check"
75 | ],
76 | "typedef-whitespace": [
77 | true,
78 | {
79 | "call-signature": "nospace",
80 | "index-signature": "nospace",
81 | "parameter": "nospace",
82 | "property-declaration": "nospace",
83 | "variable-declaration": "nospace"
84 | }
85 | ],
86 | "variable-name": false,
87 | "whitespace": [
88 | true,
89 | "check-branch",
90 | "check-decl",
91 | "check-operator",
92 | "check-separator",
93 | "check-type"
94 | ],
95 |
96 | "directive-selector-prefix": [true, "app"],
97 | "component-selector-prefix": [true, "app"],
98 | "directive-selector-name": [true, "camelCase"],
99 | "component-selector-name": [true, "kebab-case"],
100 | "directive-selector-type": [true, "attribute"],
101 | "component-selector-type": [true, "element"],
102 | "use-input-property-decorator": true,
103 | "use-output-property-decorator": true,
104 | "use-host-property-decorator": true,
105 | "no-input-rename": true,
106 | "no-output-rename": true,
107 | "use-life-cycle-interface": true,
108 | "use-pipe-transform-interface": true,
109 | "component-class-suffix": true,
110 | "directive-class-suffix": true,
111 | "templates-use-public": true,
112 | "invoke-injectable": true
113 | }
114 | }
115 |
--------------------------------------------------------------------------------