Hello. I’ve seen @rene 's animation called Kokeshi where you can use drag and drop elements. I used similar code with my app but the point is I’m not so sure if I understand these offsets correctly. His dropbox was on the right side, mine’s on the left. I can drag the element (Scroll) it launches the timeline but doesn’t return when I drop it on the wrong area. If I drop it anywhere it launches the timeline (which should be launched only if element is one the right place). Is there someone who could check my code and give me some advices?
Scroll - Draggable element.
Anvil - Where scroll should be dropped.
timeline “Scroll_Drop” - Only if the element is on the area of Anvil.
timeline “Scroll_Fusion” - Changes the brightness and glows the scroll (draggable element).
timeline “Scroll_Reverts” - Scroll returns to its start place.
var vScroll = document.getElementById('scroll');
var vAnvil = document.getElementById('anvil');
if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseStart) {
//When a gesture begins, set screen brightness to lower and glow the anvil.
hypeDocument.startTimelineNamed('Scroll_Fusion');
}else if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
//If the scroll is not on the anvil, revert scroll to original position.
if (vScroll.offsetLeft > vAnvil.offsetLeft && vScroll.offsetTop > vAnvil.offsetTop && vScroll.offsetLeft + vScroll.offsetWidth < vAnvil.offsetLeft + vAnvil.offsetWidth && vScroll.offsetTop + vScroll.offsetHeight < vAnvil.offsetTop + vAnvil.offsetHeight)
hypeDocument.goToTimeInTimelineNamed(0, 'Scroll_Drop');
hypeDocument.startTimelineNamed(('Scroll_Drop'), hypeDocument.kDirectionForward);
}else{
//if scroll is not on the anvil: revert
hypeDocument.startTimelineNamed(('Scroll_Reverts'), hypeDocument.kDirectionForward);
}
Thank you in advance for any help.