Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DDINCBrent

EaselJS and Draggable

Recommended Posts

Just curious if Draggable now works with EaselJS and Canvas? I found a post from almost 7 years ago where the answer was no, but that was 7 years ago and now I know that GSAP 3 is compatible with EaselJS I even use it inside of Adobe Animate which I do a lot of programming in. But my issues is If draggable is compatible now I am not sure how I can target my movieclips. 

 

Draggable.create(Main.MorningTasks.getChildByName(Root.ScheduledTasks.Morning[i].text),
	{
		type:'x,y',
		bounds: Main,
		onClick: function()
		{
			console.log(Task.name);
		},
		onDragEnd: function()
		{
			console.log('Released ' + Task.name)
		}
					
});

Following the example on Draggable Plugin Page, what I have I think should be right. Just looking for some guidance, I love GSAP and would love to be able to use draggable as well. 

Link to post
Share on other sites

Nah, making something draggable in all browsers, across devices (touch/point/mouse) with all the features Draggable offers is actually quite complicated. EaselJS/canvas is sorta like a big blob of pixels, so we can't just wire it up for Draggable which relies on pointer/mouse/touch events on specific elements in order to do its work. Plus it needs element.getBoundingClientRect() and some other DOM-specific stuff that's just not available in environments like <canvas>.  Building it on EaselJS would require a TON of work and it'd be a whole different beast altogether. It wouldn't make sense to shove all those kb into Draggable just to make it compatible with EaselJS. And frankly, not many people have even expressed interest in using Draggable in that environment so it's not high on our list of priorities, sorry. 

 

You could certainly use a regular DOM element as a proxy and then use an onDrag to run whatever logic you need to sync it with your EaselJS stuff. 

 

If you're still having trouble, please provide a reduced test case in codepen so we can see what's going on. But we're not in a position to wire something up with EaselJS for you. We'd be happy to answer any questions about GreenSock tools, though. 

  • Like 3
Link to post
Share on other sites

Gotcha, well thank you for the update! Ill give your suggestion a try! Thank you!

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×