Not working drag in touch device

[DenisDremkov]

I'm submitting a ... (check one with "x")

[ x ] bug report 

**Current behavior**
LOOK PLEASE CURRENT VIDEO - https://www.loom.com/share/f28f397044e440a0b29ba46052bcca3d


**Expected behavior**
LOOK PLEASE CURRENT VIDEO - https://www.loom.com/share/f28f397044e440a0b29ba46052bcca3d


**Reproduction of the problem**
LOOK PLEASE CURRENT VIDEO - https://www.loom.com/share/f28f397044e440a0b29ba46052bcca3d


**What is the motivation / use case for changing the behavior?**
<!-- Describe the motivation or the concrete use case -->

**Please tell us about your environment:**
{
  "name": "ttt",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng lint ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "test-single-headless": "ng test --browsers=PhantomJS --watch=false --code-coverage",
    "lint": "ng lint watch",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/common": "^6.1.10",
    "@angular/compiler": "^6.1.10",
    "@angular/core": "^6.1.10",
    "@angular/forms": "^6.1.10",
    "@angular/http": "^6.1.10",
    "@angular/platform-browser": "^6.1.10",
    "@angular/platform-browser-dynamic": "^6.1.10",
    "@angular/router": "^6.1.10",
    "@ng-bootstrap/ng-bootstrap": "^3.3.0",
    "@ng-select/ng-select": "^2.10.2",
    "@ngrx/effects": "^6.1.0",
    "@ngrx/entity": "^6.1.0",
    "@ngrx/router-store": "^6.1.0",
    "@ngrx/store": "^6.1.0",
    "@ngrx/store-devtools": "^6.1.0",
    "@swimlane/dragula": "^3.7.3",
    "@swimlane/ngx-dnd": "^7.0.0",
    "@types/lodash": "^4.14.120",
    "angular-froala-wysiwyg": "^2.9.5",
    "autoimport": "0.0.64",
    "bootstrap": "^4.1.3",
    "bson": "^4.0.1",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "install": "^0.12.2",
    "karma-coverage": "^1.1.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-remap-coverage": "^0.1.5",
    "lodash": "^4.17.10",
    "lodash.find": "^4.6.0",
    "ng-click-outside": "^4.0.0",
    "ngrx-store-localstorage": "git+https://github.com/bmalinconico/ngrx-store-localstorage.git#fix_partial_rehydration_of_keys_dist",
    "ngx-bootstrap": "^3.1.2",
    "ngx-color-picker": "^7.0.1",
    "ngx-device-detector": "^1.3.5",
    "ngx-embed-video": "^1.0.4",
    "ngx-spinner": "^6.1.2",
    "ngx-ui-switch": "^8.0.0-beta.0",
    "ngx-uploader": "^7.0.0",
    "npm": "^6.7.0",
    "primeng": "6.1.3",
    "reset-css": "^4.0.1",
    "rxjs": "~6.4.0",
    "rxjs-compat": "^6.3.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^6.2.9",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@ngrx/schematics": "^6.1.0",
    "@types/jasmine": "2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-mocha": "^1.3.0",
    "mocha": "^5.2.0",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.8.0"
  }
}

* **ngx-dnd version:** 7.0.0

* **Angular version:** 6.1.10
<!-- Check whether this is still an issue in the most recent Angular version -->

* **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
<!-- All browsers where this could be reproduced -->

* **Language:** ["typescript": "~2.8.0"]

MODEL in controller

this.sectionList = [
  {
    name: 'section 1',
    layouts: [
      {
        name: 'layout 1-1',
        controls: [
          {name: 'control 1-1-1'},
          {name: 'control 1-1-2'},
          {name: 'control 1-1-3'}
        ]
      },
      {
        name: 'layout 1-2',
        controls: [
          {name: 'control 1-2-1'},
          {name: 'control 1-2-2'},
          {name: 'control 1-2-3'}
        ]
      },
    ]
  },
  {
    name: 'section 2',
    layouts: [
      {
        name: 'layout 2-1',
        controls: [
          {name: 'control 2-1-1'},
          {name: 'control 2-1-2'},
          {name: 'control 2-1-3'}
        ]
      },
      {
        name: 'layout 2-2',
        controls: [
          {name: 'control 2-2-1'},
          {name: 'control 2-2-2'},
          {name: 'control 2-2-3'}
        ]
      }
    ]
  },
  {
    name: 'section 3',
    layouts: [
      {
        name: 'layout 3-1',
        controls: [
          {name: 'control 3-1-1'},
          {name: 'control 3-1-2'},
          {name: 'control 3-1-3'}
        ]
      },
      {
        name: 'layout 3-2',
        controls: [
          {name: 'control 3-2-1'},
          {name: 'control 3-2-2'},
          {name: 'control 3-2-3'}
        ]
      }
    ]
  }
]

HTML:

"<div 
  style = "position: fixed; top:0; bottom: 0; left:0; right: 0; overflow: hidden;"  
  ngxDroppable
  [model]="sectionList"
  dropZone="sections">
  
  <div
    *ngFor="let section of sectionList"
    ngxDraggable = "sections" 
    [model]="section"
    [moves]="true"
    style = " min-height: 100px; border: 2px solid red; margin-bottom: 20px;">
    <div><button ngxDragHandle  style = "padding: 2px; border: 1px solid #000; margin: 2px; background-color: #fff;">drag handler</button><span>  {{section.name}}</span></div>
    
    <div class="row">
      <div
        *ngFor = "let layout of section.layouts; let i = index"
        class = "col-sm-6">

        <div
          ngxDroppable = "layout"
          [model]="layout.controls"
          style = "min-height: 100px; border: 1px solid green; margin: 5px;"
          [model]="layout.controls">
          
          <p>{{layout.name}}</p>
         
          <div
            *ngFor="let control of layout.controls"
            ngxDraggable
            [model]="control"
            style = "background-color: #ccc; height: 50px; border: 1px solid; margin: 10px;"  
            [moves]="true"
            dropZones = "['layout']">
            <button ngxDragHandle style = "padding: 2px; border: 1px solid #000; margin: 2px; background-color: #fff;">drag handler</button>
            <span>{{control.name}}</span>
          </div>  
        </div>  
      </div>   
    </div>
  </div>   
</div>"

[wendellmva]

One year later and the problem is still there. On a form factor smaller than desktop dragging starts throwing an error.