Pressmove or mouseover does not work on phones
Following is the simple code that I have for dragging around a ball. It works fine on the desktop browsers, but not on phones and tablets.
function dragFunction(){
const canvasStage = new createjs.Stage("canvas");
createjs.Touch.enable(canvasStage, true, false);
function onMove(event){
this.circle.x = event.stageX / stage.scaleX;
this.circle.y = event.stageY / stage.scaleY;
}
/** ---- Mousemove ---- **/
let mousedown = false;
this.circle.on("mousedown", () => mousedown = true);
canvasStage.on("stagemousemove", (e) => mousedown && onMove.bind(this)(e));
canvasStage.on("mouseup", () => mousedown = false);
/** ------------------- **/
/** ---- Pressmove ---- **/
// this.circle.on("pressmove", onMove.bind(this));
/** ------------------- **/
}
Someone has already asked this question before, and they did not get satisfactory answers. Someone else answered that the touch has to be prevented on the webpage itself, and provided the following link
But despite that, I had no luck as I tried putting the listener on the symbol itself as well as on document.body.
Steps to reproduce the problem:
1) Create an .fla file with a symbol named circle.
2) Publish the file in HTML5 format.
3) Copy the code above in a file and save it with the name program.js in the same folder as the published HTML5 file.
3) Add the line <script src="./program.js"></script> to the <head> section of the published .html file.
4) Find the function this.frame_0 and add the line dragfunction.bind(this)(); to the published .html file.
4) Run the .html file, and check if the circle moves when you drag it. If yes, then run the same file on your phone or in change the device to a phone in the console of the browser.
5) Check again if the circle moves on drag.
AdChoices