(feat): make use of the drag lock from ngx-drag-drop

package.json

@@ -43,7 +43,7 @@
     "material-design-icons": "~3.0.1",
     "material-design-lite": "~1.3.0",
     "medium-editor": "^5.23.2",
-    "ngx-drag-drop": "^2.0.0",
+    "ngx-drag-drop": "https://github.com/Minds/ngx-drag-drop.git#9819e8e",
     "plotly.js": "^1.47.4",
     "qrcodejs2": "0.0.2",
     "rxjs": "~6.5.2",

src/app/common/common.module.ts

@@ -107,7 +107,7 @@ import { ChannelModeSelectorComponent } from './components/channel-mode-selector
 import { ShareModalComponent } from '../modules/modals/share/share';
 import { RouterHistoryService } from './services/router-history.service';
 import { DraggableListComponent } from './components/draggable-list/list.component';
-import { DndModule } from 'ngx-drag-drop';
+import { DndModule } from 'ngx-drag-drop/dist';
 import { SiteService } from './services/site.service';
 import { MarketingComponent } from './components/marketing/marketing.component';
 import { MarketingFooterComponent } from './components/marketing/footer.component';

src/app/common/components/draggable-list/list.component.ts

-import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
-import { DndDropEvent, EffectAllowed } from 'ngx-drag-drop';
+import {
+  AfterViewInit,
+  Component,
+  ContentChild,
+  ElementRef,
+  Input,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import {
+  DndDraggableDirective,
+  DndDropEvent,
+  EffectAllowed,
+} from 'ngx-drag-drop/dist';
 
 @Component({
   selector: 'm-draggable-list',
@@ -36,6 +48,9 @@ export class DraggableListComponent {
   @Input() data: Array<any>;
   @Input() dndEffectAllowed: EffectAllowed = 'copyMove';
   @Input() id: string;
+  @ViewChild(DndDraggableDirective, { static: false })
+  draggableDirective: DndDraggableDirective;
+
   @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
 
   trackByFunction(index, item) {
@@ -62,4 +77,8 @@ export class DraggableListComponent {
       this.data.splice(dropIndex, 0, event.data);
     }
   }
+
+  toggleDraggable(value: boolean, event: any) {
+    this.draggableDirective.toggleDragLock(!value, event.target);
+  }
 }

src/app/modules/pro/settings/settings.component.html

@@ -294,7 +294,11 @@
                 Set up your category filter hashtags here.
               </p>
 
-              <m-draggable-list [data]="settings.tag_list" [id]="'tag'">
+              <m-draggable-list
+                [data]="settings.tag_list"
+                [id]="'tag'"
+                #tagsList
+              >
                 <ng-template let-tag="item" let-i="i">
                   <div class="m-proSettings__field">
                     <label i18n> Hashtag #{{ i + 1 }} </label>
@@ -306,6 +310,8 @@
                         [id]="'tag-label-' + i"
                         [name]="'tag[' + i + '][label]'"
                         [(ngModel)]="tag.label"
+                        (focusin)="tagsList.toggleDraggable(false, $event)"
+                        (focusout)="tagsList.toggleDraggable(true, $event)"
                       />
 
                       <input
@@ -314,6 +320,8 @@
                         [id]="'tag-tag-' + i"
                         [name]="'tag[' + i + '][tag]'"
                         [(ngModel)]="tag.tag"
+                        (focusin)="tagsList.toggleDraggable(false, $event)"
+                        (focusout)="tagsList.toggleDraggable(true, $event)"
                       />
 
                       <i class="material-icons" (click)="removeTag(i)">
@@ -354,7 +362,11 @@
                 />
               </div>
 
-              <m-draggable-list [data]="settings.footer_links" [id]="'title'">
+              <m-draggable-list
+                [data]="settings.footer_links"
+                [id]="'title'"
+                #footerList
+              >
                 <ng-template let-link="item" let-i="i">
                   <div class="m-proSettings__field">
                     <label i18n> Link #{{ i + 1 }} </label>
@@ -366,6 +378,8 @@
                         [id]="'footer_link-title-' + i"
                         [name]="'footer_link[' + i + '][title]'"
                         [(ngModel)]="link.title"
+                        (focusin)="footerList.toggleDraggable(false, $event)"
+                        (focusout)="footerList.toggleDraggable(true, $event)"
                       />
 
                       <input
@@ -374,6 +388,8 @@
                         [id]="'footer_link-href-' + i"
                         [name]="'footer_link[' + i + '][href]'"
                         [(ngModel)]="link.href"
+                        (focusin)="footerList.toggleDraggable(false, $event)"
+                        (focusout)="footerList.toggleDraggable(true, $event)"
                       />
 
                       <i class="material-icons" (click)="removeFooterLink(i)">