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

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.


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

Demo here.
Hype Project: (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.

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.

1 Like

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.


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:


The Hype Project referenced by this (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;

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**
1 Like