Drag and drop on a target

Questions
1

I just need a bit of help to know where to go to next to a spelling program I am working. Here is the screen shot to give an idea of what I need help with.

image
image1920×1117 43.4 KB

So, I can drag and drop the black letters, but I need to work out how to make sure when they hit the correct grey letter, they fix into place.

Clearly there is an issue with two "a" letters - because it shouldn't matter which grey "a" they fix too.

The other thing is that when all the letters are in place correctly I need to be able to have a message appear.

SO one thing at a time........ where can I look on the ZIM site for assistance with the drag and drop in the correct spot?

PS I am using ADOBE ANIMATE for this project, and this is on page 2 of Pages that I am using.

2

I think you will be able to figure it out from this example

If not, let us know. The multiple letters should not be an issue. Just pass an array of the two (or more) targets in the dropTargets parameter.

3

Hello. The technique you will follow here is to check the text of the relevant label while checking with pressup.

dragLabel.text==targetTarget.text

If the label you drag and drop here and the label texts on the target are the same, it will be what you want. If not, you write what should be accordingly.

4

You can do it manually with a pressup, a hitTest on each item in a container of targets to see if you hit one and if so the label is the same. Or you can try the dropTargets technique where that is done for you - and the animate back to the start is done too, etc.

Here is an example that shows both ways

1 Like
5

Thank you so much for your direction. I'm starting to work through this now and over the next couple of days. I really need to master this idea.

Rod

6

Thank you for your help with this. I will be working on this now and over the next little while. I'll give feedback as soon as I can.

Rod

1 Like
7

I feel a bit of a twit with all this ... but here goes!

I pasted the code for this straight into adobe animate because I thought that it should work. The scoops drag and drop, the cones are there, but the function of clicking into the correct spot doesn't happen.

Can you see what I am missing.

This is the direct copy of the code:

I'm really sorry I can't gert any further but I would like to persist with this and get it right.

// Given F, S, W, H or frame, stage, stageW, stageH

F.color = interstellar;

new Label("ZIM drop - match specific objects", null, null, yellow).pos(0,50,CENTER);

const cones = new Tile(new Flare(yellow).reg(RIGHT,CENTER).rot(-90), 3, 1, 110)
.center()
.mov(0, 200);

const scoops = new Tile(new Circle(60,series(red,white,blue)).reg(0,40), 3, 1, 80)
.center()
.mov(0,-100);

const matches = [1,0,2]; // indexes of matching cones for order of balls
let num = 0;

// set drag and dropTargets for scoops
scoops.loop((scoop,i)=>{
// scoop 0, 1, 2
new Label(i).center(scoop);
const match = cones.items[matches[i]]; // cone 1, 0, 2
new Label(i).centerReg(match).rot(90); // cone 1 gets a 0, cone 0 gets a 1, and cone 2 gets a 2
scoop.drag({dropTargets:match});
scoop.on("pressup", ()=>{
if (scoop.dropTarget) {
scoop.addTo(S, 0); // under cones
if (++num==matches.length) new Emitter().center().mov(0,-120).spurt(30);
}
S.update();
});

});

8

Are you using ZIM 017? Check the check your final file CTRL U to see the source and look up top.

9

That worked..... I had missed the update!
Right - I'm ready to give it another go now. :slight_smile:

1 Like
10

Also, you can add code here on the forum by using three back-ticks ` at the start and at the end. I usually add JavaScript to directly after the first three back-ticks - it makes better color syntax.