Problem with drag and drop


(Gabhán Ó Dochartaigh) #1

This is a small drag and drop exercise intended to compliment an educational article on habitats for children (in Irish Gaelic). Don’t worry about the text - just navigate through to the final scene and drag the animals to the correct habitat – 2 animals to each habitat. After correctly matching the animals, 2 buttons appear – 1 takes the user back to the very start and the other just takes the user back 1 step. The animals to be matched to the habitat are chosen at random. Everything seems to work ok until one of the scenes is chosen for a second time - then the images don’t load properly and I can’t work out why. Any guidance would be much appreciated, it can be viewed here: http://www.aiseolas.com/gnathoga1/gnathoga1.html
The files can be found here: https://www.dropbox.com/s/5f2d2zxxx5wdnzr/habitats.zip?dl=0


(Gabhán Ó Dochartaigh) #2

I am assuming I need to reset all items after dragging them the first time (this has just dawned on me) – I will try to work this out and (most likely) come back if I can’t.


Refresh/Reload scene in Javascript
(Hans-Gerd Claßen) #3

give an common class to all elements of a scene that are manipulated and you want to reset.

on sceneload iterate over those elements and collect the data (position etc. ) of those …

on an event of your choice reset the elements using the collected data.

btw. i would always prefer hype builtin cappabilities for controlling dragndrop operations.
many examples within the forum


(Hans-Gerd Claßen) #4

hypexample:

dragAndDropPlusReset.hype.zip (302.6 KB)

when a element is dragged the initial properties where stored.
on exitscene all dragged elements where repositioned to initial state

note: i modified this from an older forumfile


(Gabhán Ó Dochartaigh) #5

Many thanks Hans-Gerd. I have very limited knowledge of Javascript - especially within Hype. I based my example on something I found in this forum. I have taken your functions and replaced my own with them and it now works, and resets properly - many thanks.
However, my original idea was an attempt at being able to drag more than 1 item into the same drop zone - I had hard-coded this so that they would display side by side, as opposed to being stacked on top of each other.

I have therefore tried to adopt the following principal into my own example, but I am falling down badly with javascript syntax.

What I am trying to do is:

In the head of the document, create an empty array:

var placement = [];

then, within my drag and drop function, I populate that array with the top and left positions of each element (this is what I have tried):

function rememberLength(){
for (i=0; i<=dragElements.length;i++){
placement[i]=hypeDocument.getElementProperty(dragElements[i], ‘top’, ‘left’);
}
alert(placement[3]);
};
Needless to say - it doesn’t appear to be working.

I imagine that on scene unload, I can then access the same array, placement, and create a loop to reset the draggable objects. I then empty the array again.

Am I even on the right tracks?


(Hans-Gerd Claßen) #6

dragAndDropPlusResetPlusOffset.hype.zip (276.1 KB)

could be more generic, but please take as is … :slight_smile:


(Pete) #7

Hi Hans,

What if I wanted to drag to bookmark so its a bookmark link?


(Hans-Gerd Claßen) #8

sry but i won’t investigate … did you try a googlesearch on ‘js set bookmark crossbrowser’ ¿
next step would be how to manage dragevent on this …