At the end of an On Drag Action can a Timeline be triggered?


#1

I applied On Drag action (Control Element Position) to an element; when we let go of the element after dragging it on the screen, can a timeline be triggered?

A clarification - I have seen multiple posts on this topic and related solutions. But they seem to be using JS or Jquery etc that I am not knowledgeable in! I am hoping for a simple hack in Hype itself:-) Thanks.


#2

@aStoryTeller

Below is an example Demo project which does what (I believe) You are describing.

Demo here.
Hype Project: DragTriggerTimeline_JHSv1.hype.zip (15.4 KB)

Hype Documentation for Drag Events.


The Set-up:


**Code used in the Demo:**
function dragTimelineTrigger(hypeDocument, element, event) {
	if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
	hypeDocument.startTimelineNamed(('RotateRect'), hypeDocument.kDirectionForward);
	}	
}

**EDIT:** Just saw your edit regarding no JavaScript if possible. If there is a way to do this without code I am not conversant with it. But really - the code above is so simple to implement - give it a go - check out the Hype Project Demo I did above. You do not have to be a JavaScript whiz - I'm not. Even if You just dip your toe into the JavaScript pool now and then, a whole new world of possibilities will open up.

#3

Jim, thank you. You made it look so simple! And, thank you also for your advice. I tried to extend your code by verifying x and y positions. Yay! It worked. Thanks again.


#4

A follow-up question - how can I restrict the target zone (drop area) to the dimensions of the canvas element instead of the screen/document dimensions; if I use var x = (event[‚ÄėhypeGestureXPosition‚Äô]), the value of x is much larger than the width of my canvas element. Thanks for your help.


#5

@aStoryTeller

Assuming You are doing a drag&drop operation > this is a question with which I have zero personal experience & knowledge.

So I would invite You to do a search for ‚Äúdrag and drop‚ÄĚ after which a cornucopia of hits will result.

Examples of two topic hits that offer different approaches:


#1

The Hype Project referenced by this post:D-n-d_test.hype.zip (17.6 KB)

General concept (code snippet here by @h_classen) :

    p = element.parentNode;
	pX = p.getBoundingClientRect().left;
	pY = p.getBoundingClientRect().top;
	gX = event['hypeGestureXPosition'];
	gY = event['hypeGestureYPosition'];
	
	eW = element.getBoundingClientRect().width;
	eH = element.getBoundingClientRect().height;


#2
The following is absolutely marvelous by @rene:


I find this code far more complex than the above "matt5834" posting ~ @h_classen example. From my brief perusal "offset" appears to be the approach for ascertaining the target:

if (vDragHair.offsetLeft > vDropHead.offsetLeft && vDragHair.offsetTop > vDropHead.offsetTop && vDragHair.offsetLeft + vDragHair.offsetWidth < vDropHead.offsetLeft + vDropHead.offsetWidth && vDragHair.offsetTop + vDragHair.offsetHeight < vDropHead.offsetTop + vDropHead.offsetHeight)


**Kokeshi Screen shot**