HTML5 Canvas - Dragging on desktop, not on touchscreen

Report · Apr 29, 2020

Reposting as the first post was somehow marked as spam. I'm working on a demo of an interactive "timeline" for a client. I've been pulling the functionality together through folks here and around the internet.

You should be able to touch the timeline and drag it along to scroll through events. It works OK on a browser, but the dragging does NOT work on a touch screen - which is ultimately how this project will be viewed.

Here is the demo currently, you can click the timeline and drag it along:
https://dev.northeastcolor.com/PFTimeline/Timeline042720.html

Here is my code. Any help is much appreciated.

var that = this;
var pages;

that.start = function ()

{
	createjs.Touch.enable(true);
	stage.mouseMoveOutside = true;
	
	pages = that.timeline1;
	pages.on("mousedown",that.mouseDownHandler);
	
}

that.mouseDownHandler = function(e)
{
	e.currentTarget.offsetX = (e.stageX / stage.scaleX) - e.currentTarget.x;
	pages.on("pressmove",that.pressMoveHandler);	
	};
	
that.pressMoveHandler = function(e)
	{
		e.currentTarget.x = (e.stageX / stage.scaleX) - e.currentTarget.offsetX;
	};
setTimeout(that.start,0);
	
that.timeline1.TL96.on('click', function(){
that.movieClip_1.visible = true;
that.darken1.visible = true;
});

that.timeline1.TL96b.on('click', function(){
that.movieClip_1.visible = true;
that.darken1.visible = true;
});

that.movieClip_1.on('click', function(){
that.movieClip_1.visible = false;
	that.darken1.visible = false;
});