Skip to main content
Captain VeganBurger
Participant
July 4, 2022
Answered

Pressmove working fine with mouse on Mac or PC, but not touch devices

  • July 4, 2022
  • 2 replies
  • 128 views

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...

    This topic has been closed for replies.
    Correct answer Captain VeganBurger

    After a lot of head scratching the solution was really simple! I moved;

    createjs.Touch.enable(stage, true, false);

    from the global script area, to frame 1.

    Hope this helps someone else down the line.

    2 replies

    Captain VeganBurger
    Captain VeganBurgerAuthorCorrect answer
    Participant
    July 6, 2022

    After a lot of head scratching the solution was really simple! I moved;

    createjs.Touch.enable(stage, true, false);

    from the global script area, to frame 1.

    Hope this helps someone else down the line.

    kglad
    Community Expert
    Community Expert
    July 4, 2022

    you have to disable rubberbanding,

     

    document.body.addEventListener('pressmove', function(event) {
    event.preventDefault();
    }, {
    passive: false,
    useCapture: false
    });

    Captain VeganBurger
    Participant
    July 5, 2022

    Thanks for your reply. I have tried to integrate your code above but so far have not been able to get it working.

     

    First I tried pasting your code into the animate global script area. Then I tried pasting it on frame 1 where I have all my functions set up. That didn't work either. Then I tried pasting it within script tags outside the animate iframe on the HTML page where the table planner resides. But still no go.

     

    Can you see where I'm going wrong?

    Thanks again for your help. It is certainly appreciated.