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
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.
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
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
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?
dragAndDropPlusResetPlusOffset.hype.zip (276.1 KB)
could be more generic, but please take as is …
Hi Hans,
What if I wanted to drag to bookmark so its a bookmark link?
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 …