Draggable button doesn't respond to TouchMove

Community Beginner ,
Mar 19, 2017

Copy link to clipboard

Copied

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?

TOPICS
ActionScript

Views

1.1K

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

1 Correct Answer

Adobe Community Professional , Mar 19, 2017
Colin Holgate Adobe Community Professional , Mar 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(); }

Likes

Translate

Translate
Jump to answer Jump to answer
Adobe Community Professional ,
Mar 19, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Mar 19, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Mar 19, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Mar 19, 2017

Copy link to clipboard

Copied

It works!!! Tnx a lot

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Mar 20, 2017

Copy link to clipboard

Copied

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)?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Mar 20, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Mar 21, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Mar 21, 2017

Copy link to clipboard

Copied

Did you try removing that line?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Mar 21, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
May 29, 2017

Copy link to clipboard

Copied

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 ?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Jan 04, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more