Skip to main content
eytanrose
Inspiring
March 19, 2017
Answered

Draggable button doesn't respond to TouchMove

  • March 19, 2017
  • 3 replies
  • 2432 views

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?

This topic has been closed for replies.
Correct answer Colin Holgate

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(); }

3 replies

Participant
May 29, 2017

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
Participant
January 4, 2021

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?

eytanrose
eytanroseAuthor
Inspiring
March 20, 2017

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
Inspiring
March 20, 2017

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
eytanroseAuthor
Inspiring
March 21, 2017

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
Colin HolgateCorrect answer
Inspiring
March 19, 2017

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
eytanroseAuthor
Inspiring
March 19, 2017

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
Inspiring
March 19, 2017

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.