Pressmove working fine with mouse on Mac or PC, but not touch devices
Hi all,
I have searched through many posts trying to find a fix for this, but so far no joy. I'm hoping someone can shed some light on what I'm missing.
I've built a table/seating planning app in animate and used createjs for the functionality. It all works fine on Mac and PC, on multiple browsers. The trouble I'm having is the pressmove function that doesn't work on touch devices (tested on an iPhone 7 and iPad Pro). The 'click' 'dblclick' and 'pressup' functions all fire just fine. As do other functions that I've set up.
I have the following code in my global script to enable touch etc:
createjs.Touch.enable(stage, true, false);
stage.enableMouseOver(10);
stage.mouseMoveOutside = true;Example code below shows oval tables stored in an array, then the pressmove function call.
let oi;
const ovalArray = [this.oval10_s01, this.oval10_s02, this.oval10_s03, this.oval10_s04, this.oval10_s05, this.oval10_s06, this.oval10_s07, this.oval10_s08, this.oval10_s09, this.oval10_s10];
for (oi = 0; oi < ovalArray.length; oi++) {
ovalArray[oi].on("pressmove", moveTableOval);
ovalArray[oi].on("click", clickToFloorOval);
ovalArray[oi].on("dblclick", rotateTable);
ovalArray[oi].on("pressup", dropTableOval);
}Oval table pressmove function:
// FURNITURE PANEL COORDINATES
const fpMinX = 133;
const fpMaxX = 545;
const fpMinY = 30;
const fpMaxY = 280;
// DRAG & DROP BOUNDARY
const ddBounds = {
x: 351,
y: 332,
width: 549,
height: 664
};
const ot10 = { // OVAL TABLE DIMS
width: 94,
height: 68
};
function moveTableOval(e) {
if (!(this.x > fpMinX && this.x < fpMaxX && this.y > fpMinY && this.y < fpMaxY)) {
let p = stage.globalToLocal(e.stageX, e.stageY);
e.currentTarget.x = Math.max(ddBounds.x + ot10.width / 2, Math.min(ddBounds.x + ddBounds.width - ot10.width / 2, p.x));
e.currentTarget.y = Math.max(ddBounds.y + ot10.height / 2, Math.min(ddBounds.y + ddBounds.height - ot10.height / 2, p.y));
this.alpha = 0.6;
}
}Any guidance on what I'm missing much appreciated...
