Need help with the offsets and draggable elements


(Patrick) #1

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.


(René) #2

You missed a bracket { just before “hypeDocument.goToTimeInTimelineNamed(0, ‘Scroll_Drop’);
hypeDocument.startTimelineNamed((‘Scroll_Drop’), hypeDocument.kDirectionForward);”


(Patrick) #3

Thank you @rene for your time to respond. When I placed the missing bracket the code didn’t run when I added another to close It does but I can’t drop my scroll. It always returns to its place.


(René) #4

And there’s a round bracket to much in this line:

Should be:
hypeDocument.startTimelineNamed(‘Scroll_Drop’),


(Patrick) #5

@Rene thank you so much for your help. The problem was with the element not the code. Unfortunately I used scroll ID in a group instead of one element.