Skip to main content
eugener2418576
Inspiring
September 18, 2018
Answered

Drag and Drop - Simple

  • September 18, 2018
  • 2 replies
  • 13399 views

Hey there.

I am wanting some 'drag and drop' functionality for a module I am creating.

I have tried a few tutorials but I can't quite get my head around it. Plus, the tutorials that are available seem to be more focused around not using the timeline and more using pure code. I would rather use the timeline + Instance names etc.

Essentially I have 3 drag objects. They need to be placed in the correct position named box1, box2, box3. Once the user has all 3 drag objects correctly in the boxes, a button appears to move onto the next stage.

I've uploaded my project here.

I feel like I'm not using the full power of Adobe Animate - if you see some things that I am doing wrong please also let me know!

I am using video imported from another program, and then I use z-index:-1 on the dom overlay once the program has been exported (so that the buttons become interactive, otherwise they are behind the video).

Thanks for your time and in helping me out here.

This topic has been closed for replies.
Correct answer JoãoCésar17023019

Hi.

Take a look at these two samples:

Animate CC Drag n drop animation example in HTML5 Canvas  (created by resdesign​)

Animate Drag/Drop Help

I hope this helps.

Regards,

JC

2 replies

jese63036518
Participant
April 22, 2019

How cal i make to drag an object along an path

JoãoCésar17023019
Community Expert
Community Expert
April 23, 2019

Hi.

Can you show us a sample of how exactly do you want to drag an object along a path?

For example: a circular or an arbitrary path? Is the path described by code or this path would be created in Animate IDE using the drawing tools?

Regards,

JC

jese63036518
Participant
April 23, 2019

I want create the path in Animate using the drawing tools

drag like this

https://codepen.io/anon/pen/jRpvGo?editors=1111

https://zimjs.com/nio/drag.html

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
September 18, 2018

Hi.

Take a look at these two samples:

Animate CC Drag n drop animation example in HTML5 Canvas  (created by resdesign​)

Animate Drag/Drop Help

I hope this helps.

Regards,

JC

eugener2418576
Inspiring
September 19, 2018

Hey JC,

I had a look at both of those tutorials + the one from the spanish youtuber!

Aaaaand, I almost got there but I can't for the life of me get my draggables to 'lock' onto the containers.

Wondering if you had a second? Could you take a look?

https://drive.google.com/open?id=19x0VSNr_TUpyC892F7u5scpRyiW2ZYuN

I tried both of the examples that you linked. your version looked better because of the 'snap back' but when I tried to implement it, I had errors on my mouseUp event (as I do everytime I try to implement this).

Please help!

Thanks

JoãoCésar17023019
Community Expert
Community Expert
September 20, 2018

Hi.

Sorry for the long delay.

Did you solve the problem?