Draggable button doesn't respond to TouchMove
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?
