Moving with objects on the touch screen in the Edge is not possible

[ladislavp39251242]

Hi, can you help me? Moving with objects on the touch screen in the Edge browser is not possible. Chrome or Firefox works fine. Is it necessary to enter some code in javascript for Microsoft Edge??

Thanks!

[JoãoCésar]

Hi.

What code are you using?

[ladislavp39251242]

Hi Joao, its  createjs with "mousedown" and "pressmove):

this.pismeno1.on("mousedown", function (evt)

{

var p1 = _this.globalToLocal(evt.stageX, evt.stageY);

this.offset1 = {

  x: evt.currentTarget.x - p1.x,

  y: evt.currentTarget.y - p1.y

}

});

this.pismeno1.on("pressmove", function (evt)

{

var p = _this.globalToLocal(evt.stageX, evt.stageY);

evt.currentTarget.x = p.x + this.offset1.x;

evt.currentTarget.y = p.y + this.offset1.y;

});

[JoãoCésar]

Thanks.

I may be missing something because your code is not working for me at all.

Anyway, here is a suggestion. I tested on multiple browsers in my PC and my phone (including Edge) and it worked as expected. It also works with Animate's reponsive settings.

createjs.Touch.enable(stage); // for touch enabled devices
stage.mouseMoveOutside = true; // to keep getting mouse events when the pointer leaves the canvas
// e.stageX / stage.scaleX  and e.stageY / stage.scaleY are necessary for responsive settings
this.pismeno1.on("mousedown", function(e)
{
    e.currentTarget.offsetX = e.currentTarget.x - e.stageX / stage.scaleX;
    e.currentTarget.offsetY = e.currentTarget.y - e.stageY / stage.scaleY;
});
this.pismeno1.on("pressmove", function(e)
{
    e.currentTarget.x = e.stageX / stage.scaleX + e.currentTarget.offsetX;
    e.currentTarget.y = e.stageY / stage.scaleY + e.currentTarget.offsetY;
});

Please tell me if this works for you as well.

Regards,

JC

[ladislavp39251242]

Sorry, here's the code:

_this=this
createjs.Touch.enable(_this.stage, false);
_this.stage.mouseMoveOutside = true;

var offset1

this.pismeno1.on("mousedown", function (evt)

{
var p1 = _this.globalToLocal(evt.stageX, evt.stageY);

this.offset1 = {x: evt.currentTarget.x - p1.x, y: evt.currentTarget.y - p1.y};

});

this.pismeno1.on("pressmove", function (evt)

{

var p = _this.globalToLocal(evt.stageX, evt.stageY);
evt.currentTarget.x = p.x + this.offset1.x;
evt.currentTarget.y = p.y + this.offset1.y;

});

But I do not know if we understand. The problem is in the Edge browser, when I want to move with object "pismeno1" by touching the finger on the touchscreen, the entire browser page moves forward and backward, not only the objects on the canvas.
Your code is basically the same as mine and it does not solve this Edge problem. In other browsers objects move right.
Thanks!

[JoãoCésar]

It worked for me in all browsers, including Edge. I event tried your code using Edge for Android and it worked as well.

I'm using the default Animate HTML template. Are you using something else?

And have you tried evt.preventDefault()?

[ladislavp39251242]

yes i'm using the default Animate HTML template too.

It works well with mouse, but really not on my touchscreen with fingers..

I did not try evt.preventDefault() yet, I try tomorrow..thank you

[ladislavp39251242]

so evt.preventDefault() did  not help.

[JoãoCésar]

Would you mind sharing your FLA?

[ladislavp39251242]

yes of course.

How?

[JoãoCésar]

You can use sharing services like Google Drive, Dropbox, WeTransfer, or any other of your choice.

[ladislavp39251242]

here is it:

example.rar - Google Drive

move the yellow bells with your finger across the canvas. In Edge is it not possible. Only with mouse

[JoãoCésar]

Thanks for the link.

I really cannot reproduce the problem you're facing.

I just tested your file in my PC and in my phone using Edge for Android and everything is working normally.

Have you tried other devices? What version of Animate CC and CreateJS are you using? Make sure they're all up to date.

[ladislavp39251242]

I have a subscription to Adobe Animate CC version 2017.5 build 16.5.1.104

it's really incredible. I also tried the tablet Wacom Cintiq with the pen and the same problem. I will try tomorrow again on the Multiboard touch screen.

thank you

[ladislavp39251242]

Hi, so on the Multiboard display with Win10 and Edge browser is this problem too, but Edge for Android works right.

it seems that someone has the same problem here

mousemove - "touchmove" event is not triggered in edge browser - Stack Overflow https://stackoverflow.com/questions/50022039/touchmove-event-is-not-triggered-in-edge-browser

Microsoft probably does not want to support interactive applications that will replace the outgoing flashplayer

[ladislavp39251242]

I have a solution. I have to add to the html file:

canvas { touch-action: none;}

and the problem is resolved, thanks

[ladislavp39251242]

but unfortunately is this solution for Edge without multi-touch support..

I have to find another

[ladislavp39251242 · Accepted solution]

Hi,

you may have set in Edge here: "about:flags" "Touch events API enabled". But in default settings is it disabled.

Today the last Chrome update has blocked touch events on canvas too, such as moving with objects. You need now manually(!!) enter into "chrome://flags" and enabled Touch events API. The same problem is with Edge, here is it necessary set in about:flags.

When I display HTML5 canvas scene in a browser, it is not possible to move with the finger on the touch screen with the object.

Touch events API Chrome 70 now disabled in default settings. 

and it seems that no one knows what to do with it..

[Nick Gioia]

try this. Touch Drag on Microsoft Edge and IE 11 · Issue #273 · bevacqua/dragula · GitHub

[ladislavp39251242]

thanks, but it is not a solution