Draggable button doesn't respond to TouchMove

[eytanrose]

Hi.

I'm making an animated app on Animate CC (Canvas) that should work both on the web (HTML5) and on mobile devices.

A part of this app contains a scroll bar - which is a simple button that when dragged sideways it makes the movie clip that contains it show a different frame.

I made a code that seems to work fine. The only problem is that when I test it (It opens on Chrome and then I choose "Inspect" and I toggle the device toolbar to simulate a mobile device) the button is not dragged. other "press" buttons work fine with touch - just the drag.

I know about the need for "preventDefault" but every code I've seen in forums and tried doesn't work.

Here is the script on the first frame of the movie clip containing the scrollbar:

this.gotoAndStop(0);

this.pbar.gotoAndStop(0);

var drlFrames = this.totalFrames;

var canvasWidth = stage.canvas.width;

var btnMin = canvasWidth / 720 * 40;

var btnMax = canvasWidth / 720 * 680;

this.pbar_btn.x = 40;

var sliderX = btnMin;

this.addEventListener("tick", resize.bind(this));

function resize() {

  canvasWidth = stage.canvas.width;

  btnMin = canvasWidth / 720 * 40;

  btnMax = canvasWidth / 720 * 680;

}

this.pbar_btn.ontouchstart = function(e){ e.preventDefault(); }

this.pbar_btn.addEventListener("pressmove"||"touchmove", sliderDrag.bind(this));

function sliderDrag(evt) {

  var sliderX = evt.stageX;

  if (sliderX < btnMin) {

  sliderX = btnMin;

  }

  if (sliderX > btnMax) {

  sliderX = btnMax;

  }

  evt.target.x = sliderX * 720 / canvasWidth;

  this.gotoAndStop((sliderX - btnMin + 1) * drlFrames / (btnMax - btnMin + 1));

  this.pbar.gotoAndStop((sliderX - btnMin + 1) * 99 / (btnMax - btnMin + 1));

}

I also put these lines in the root:

var stage = new createjs.Stage("canvasId");

createjs.Touch.enable(stage);

What am I doing wrong?

[Colin Holgate · Accepted solution]

The fixes would be done in the HTML file. This meta and style information solves some of the problems:

<meta name="viewport" content="user-scalable=no">

<style type="text/css"> 

* { 

  -webkit-touch-callout: none; 

  -webkit-user-select: none; 

  -webkit-tap-highlight-color: rgba(0,0,0,0);

} 

</style> 

and in the script section of the HTML you would have this line:

document.ontouchmove = function(e){ e.preventDefault(); }

[eytanrose]

Somebody else in another country is doing the html - what he gets from me is only the OAM file.

Is there no way to fix this from inside the Animate file?

And also - providing that guy does what's necessary on his end - are there any changes I need to do to the code, or will it work as is?

[Colin Holgate]

OAM is just a zip file. You could rename it and unzip it, edit the HTML that is in the Assets folder, and zip/rename it again.

Animate does have HTML templates, so you may be able to edit one of those, and have it include the lines at publish time. I haven't tried that so I'm not sure of the steps.

[eytanrose]

It works!!! Tnx a lot

[eytanrose]

Sorry to be a nag...

after I did the HTML fixes suggested, the entire element can not be scrolled or swiped on mobile. Is there a way to keep the element scrollable and make just the specific button disable the scrolling (so it will be draggable)?

[Colin Holgate]

I haven't tried it, but the document.ontouchmove = function(e){ e.preventDefault(); } part is what stops dragging. You could remove that or perhaps add it to your button and not the whole document.

[eytanrose]

could you please write the correct way to write this code line in AS3? (applied to the button "pbar_btn" which is inside a movie clip)

and also - is there a code making the element scrollable again once you stop touching the button?

[Colin Holgate]

Did you try removing that line?

[eytanrose]

Yes. I removed that line. I also tried some changes like changing "user-scalable" to "yes", and "-webkit-touch-callout:" to "default".

Still stuck with the same problems:

1) the element can't be dragged - just the 'space' around it.

2) when the device orientation change,  the stage doesn't scale to the visible window, like before.

[bhavesh4u]

Fall in the same trap as Eytanrose

Not able to drag elements on iPhone 5s (not tried anroid mobiles)

I think canvas based D&D not working on touch devices.. is it ?

[fokusmedien]

Hi!

Actually I'm also fighting with Drag n Drop on touch devices. I successfully managed to adapt an example to work with mobile (Android & iOs) but I want to work it on standard desktop win systems with touchscreen as well. Unfortunately I didn't get it to run even with the above instructions. In one of the cases I switched to a framework (draggabilly) that works very well, but not inside Canvas and Animate.

Is there anyone out there with a solution that works on more devices? Or any experiences mixing canvas with jQuery and draggabilly or other touch js assets?