Not working drag in touch device
DenisDremkov opened this issue · comments
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>"
One year later and the problem is still there. On a form factor smaller than desktop dragging starts throwing an error.