Drag and drop code advice

Using JavaScript with Hype
1

Hi.

I am trying to get a basic drag and drop to work. I looked at a few examples and decided to ‘hack’ the NoaStars project. I am not a coder. I seem to have been endowed with a low coding aptitude.

The function works, except for the fact that it doesn’t recognise the correct drop.

As the knowledge base in these forums is quite vast and all the experts have their own style(personality) of coding, I get lost.

Your patience and advise is appreciated.

Herman
Drag and drop basic.hype.zip (23.4 KB)

2

Have you made this with a beta version ?

3

Yes I did. Sorry I confused the lines of posting in the incorrect topic. I recreated it in 3 and it worked. Found my solution though.

4

just replace methods of getting position and width with the new gettermethods hype provides. they’ll take care of transforms …

5

Will do, thanks h_classen. Found an interesting example already.

1 Like
6

Nice to see my NoaStars project helps people to accomplish a drag&drop function in their project. If you need any further help, I’m happy to help you out! :grinning:

2 Likes
7

Yes, although it sometimes take me a while to decode the code, I eventually get there and learn a lot. Thanks

8

I’ve made another drag&drop example, posted it in this forum topic.

9

Hi. Thanks for all the help. My drag and drop works well now.

I have a question though and I found this question asked a few times in the forums, but can’t find my answer yet.

After the drag and drop is completed, I need to be able to trigger a timeline either by user intervention or automatically. Either will suffice at the moment.

So as the drop happens I hide the dropped object and switch on(visible) another. First I thought one could check if the element is visible, but I don’t know how to as I’ve asked someone I know that does quite a bit of coding and he said there is no such property in javascript. Just its inverse.

Now I think I must check whether that element I switched on’s opacity is at a 100%. Which I add to the timeline that is triggered on the drop. I tried this code at the bottom, but I am either so close that I can’t see the solution, or I am smoking something.

var DnDB = hypeDocument.getElementById("Bdropped");

if ((hypeDocument.getElementProperty(DnDB, 'opacity') == '1'){
hypeDocument.startTimelineNamed('dropzoneGiggle', hypeDocument.kDirectionForward);
}

Thanks for your help.

10

Why not start a timeline in the drag&drop script when the drop is successful? With this timeline you can hide the dragged element, show another and so on…

11

I did do that. I saw that in your kokeshi example. Now to continue I need to check if all the drops were done. The element properties/attribute that change ‘on drop’ is visibility.

12

I would suggest this: on scene load a javascript where you define a global like this

window.gAllDone = 0;

In the script where a drop is successful increase this global:

gAllDone++;

I don’t know I many successful drops you have to check, let’s say 5. Then right after you increased the global, check how many.

if (gAllDone == 5){//do something here, like play a timeline};
13

If I can get this to work it would be great. I managed to check the display property in a javascript that is dependant on user intervention (button), but your idea can check without that. Will definitely look into it.

Thank so much.