Skip to main content
Participant
April 29, 2020
Question

HTML5 Canvas - Dragging on desktop, not on touchscreen

  • April 29, 2020
  • 0 replies
  • 349 views

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;
});
This topic has been closed for replies.