Add lockAxis to ngDraggable

Author: Xie, Ziyu

README.md

@@ -31,6 +31,7 @@ angular2-draggable has angular directives that make the DOM element draggable an
   + **ngDraggable**:
     + Performance update. Fix [issue #112](https://github.com/xieziyu/angular2-draggable/issues/112): Control change detection with HostListener events.
     + Fix [issue #128](https://github.com/xieziyu/angular2-draggable/issues/128): Multiple phone draggables at the same time.
+    + New `[lockAxis]` input.
   + **ngResizable**:
     + Fix [issue #132](https://github.com/xieziyu/angular2-draggable/issues/132): Aspect ratio feature exits Y-Axis boundary on resize.
 
@@ -137,7 +138,8 @@ Well you can use both directives concurrently if you wish:
     | gridSize | number | 1 | Use it for snapping to grid. Refer to [demo](https://xieziyu.github.io/angular2-draggable/#/advance/snap-grid) |
     | preventDefaultEvent | boolean | `false` | Whether to prevent default mouse event |
     | scale | number | 1 | Set it when parent element has CSS transform scale |
-
+    | lockAxis | `'x' | 'y'` | null | Restrict dragging to a specific axis by locking another one |
+  
 + `ngResizable` directive support following input porperties:
 
     | Input | Type | Default | Description |

projects/angular2-draggable/src/lib/angular-draggable.directive.ts

@@ -80,6 +80,9 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
   /** Set initial position by offsets */
   @Input() position: IPosition = { x: 0, y: 0 };
 
+  /** Lock axis: 'x' or 'y' */
+  @Input() lockAxis: string = null;
+
   /** Emit position offsets when moving */
   @Output() movingOffset = new EventEmitter<IPosition>();
 
@@ -188,10 +191,17 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
   }
 
   private transform() {
-
     let translateX = this.tempTrans.x + this.oldTrans.x;
     let translateY = this.tempTrans.y + this.oldTrans.y;
 
+    if (this.lockAxis === 'x') {
+      translateX = this.oldTrans.x;
+      this.tempTrans.x = 0;
+    } else if (this.lockAxis === 'y') {
+      translateY = this.oldTrans.y;
+      this.tempTrans.y = 0;
+    }
+
     // Snap to grid: by grid size
     if (this.gridSize > 1) {
       translateX = Math.round(translateX / this.gridSize) * this.gridSize;

src/app/views/usage/options/options.component.html

@@ -13,6 +13,7 @@ <h4 class="card-title">Custom Options</h4>
               <p><button (click)="zIndexMoving = '99999'" class="btn btn-outline-primary">set [zIndexMoving] to 99999</button></p>
               <p><button (click)="preventDefaultEvent = !preventDefaultEvent" class="btn btn-outline-primary">toggle [preventDefaultEvent]</button></p>
               <p><button (click)="trackPosition = !trackPosition" class="btn btn-outline-primary">toggle [trackPosition]</button></p>
+              <p><button (click)="lockAxis = lockAxis ? undefined : 'y'" class="btn btn-outline-primary">toggle [lockAxis]='y' </button></p>
             </div>
             <div class="col-sm-6">
               <div *ngIf="useHandle">
@@ -24,6 +25,7 @@ <h4 class="card-title">Custom Options</h4>
                   [handle]="myHandle"
                   [preventDefaultEvent]="preventDefaultEvent"
                   [trackPosition]="trackPosition"
+                  [lockAxis]="lockAxis"
                   class="drag-block-lg">
                   <div #myHandle class="drag-block-handle"> #myHandle </div>
                   <p>[handle]="myHandle"</p>
@@ -33,6 +35,7 @@ <h4 class="card-title">Custom Options</h4>
                   <p>[zIndexMoving] = {{ zIndexMoving === undefined ? 'undefined' : zIndexMoving }}</p>
                   <p>[preventDefaultEvent] = {{ preventDefaultEvent }}</p>
                   <p>[trackPosition] = {{ trackPosition }}</p>
+                  <p>[lockAxis] = {{ lockAxis === undefined ? 'undefined' : lockAxis }}</p>
                 </div>
               </div>
               <div *ngIf="!useHandle">
@@ -43,13 +46,15 @@ <h4 class="card-title">Custom Options</h4>
                   [zIndexMoving]="zIndexMoving"
                   [preventDefaultEvent]="preventDefaultEvent"
                   [trackPosition]="trackPosition"
+                  [lockAxis]="lockAxis"
                   class="drag-block-lg">
                   <p>[ngDraggable] = {{ draggable }}</p>
                   <p>[position] = {{ position === undefined ? 'undefined' : position | json }}</p>
                   <p>[zIndex] = {{ zIndex === undefined ? 'undefined' : zIndex }}</p>
                   <p>[zIndexMoving] = {{ zIndexMoving === undefined ? 'undefined' : zIndexMoving }}</p>
                   <p>[preventDefaultEvent] = {{ preventDefaultEvent }}</p>
                   <p>[trackPosition] = {{ trackPosition }}</p>
+                  <p>[lockAxis] = {{ lockAxis === undefined ? 'undefined' : lockAxis }}</p>
                 </div>
               </div>
             </div>

src/app/views/usage/options/options.component.ts

@@ -17,6 +17,7 @@ export class OptionsComponent implements OnInit {
   preventDefaultEvent = false;
   trackPosition = true;
   position;
+  lockAxis;
 
   constructor() { }
 

src/assets/CHANGELOG.md

@@ -1,11 +1,15 @@
 ## 2.2.0 (2018-12-22)
 
+#### New
++ **ngDraggable**: add [lockAxis] input to restrict dragging to a specific axis by locking another one.
+
 #### Bugfix
 + **ngDraggable**:
-    + Performance update. Fix [issue #112](https://github.com/xieziyu/angular2-draggable/issues/112): Control change detection with HostListener events.
-    + Fix [issue #128](https://github.com/xieziyu/angular2-draggable/issues/128): Multiple phone draggables at the same time.
+    + fix [issue #112](https://github.com/xieziyu/angular2-draggable/issues/112): Control change detection with HostListener events. Performance updated.
+    + fix [issue #128](https://github.com/xieziyu/angular2-draggable/issues/128): Multiple phone draggables at the same time.
 + **ngResizable**:
-    + Fix [issue #132](https://github.com/xieziyu/angular2-draggable/issues/132): Aspect ratio feature exits Y-Axis boundary on resize.
+    + fix [issue #132](https://github.com/xieziyu/angular2-draggable/issues/132): Aspect ratio feature exits Y-Axis boundary on resize.
+    + Performance updated.
 ---
 
 ## 2.1.9 (2018-11-29)