Drag and Drop - Simple

[eugener2418576]

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.

[JoãoCésar · Accepted solution]

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]

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ésar]

Hi.

Sorry for the long delay.

Did you solve the problem?

[eugener2418576]

Hey JC!

I haven't solved the problem yet but give me until after the weekend - Ill come back to you!

Thanks a bunch mate.

[eugener2418576]

Hey JC,

I FINALLY FIGURED IT OUT, IM SO HAPPY!

It was mostly to do with using dot notation to enter inside of objects.. I was trying to target the wrong objects!

Thanks very much for your help

[JoãoCésar]

This is excellent! Congrats!

[WVMule]

Are those examples still available? The links don't resolve.

[Jesquivel]

How cal i make to drag an object along an path

[JoãoCésar]

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

[Jesquivel]

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ésar]

Hi.

One easier approach is to predefine the path with a regular timeline animation and than apply a drag code to a target instance.

An example:

JS code:

var root = this;
var anim = root.anim;
var dot = anim.dot;
createjs.Touch.enable(stage); // enables touch interaction for the default stage
stage.mouseMoveOutside = true; // mouse move events will continue to be called when the mouse leaves the target canvas
stage.preventSelection = true; // prevents selection of other elements in the html page if the user clicks and drags
dot.on("mousedown", function(e)
{
    this.offsetX = (stage.mouseX / stage.scaleX) - this.x; // difference between the mouse x (divided by the scale of the stage for responsive settings) and the target x
});
dot.on("pressmove", function(e)
{
    var stageMouseRatio = ((stage.mouseX / stage.scaleX) - this.offsetX) / (canvas.width / stage.scaleX); // a number from 0 to 1. It's a ratio between the mouse x and the canvas width
    anim.gotoAndStop(Math.min(Math.floor(stageMouseRatio * anim.totalFrames), anim.totalFrames - 1));
});

FLA download:

animate_cc_html5_canvas_drag_along_a_path.zip - Google Drive

I hope this helps.

Regards,

JC

[Jesquivel]

Wow, it's amazing, thanks so much.

[JoãoCésar]

You're welcome!

[Jesquivel]

Hi.
I'm looking for a way to advance an animation on a guideline when I hold down a mouse or tap on an item, but to stop when I stop pressing or leave the item's area and just go ahead. (like this video)

https://youtu.be/_X_ScvbaptE?t=21