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

[aStoryTeller]

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.

[JimScott]

@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.

[aStoryTeller]

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.

[aStoryTeller]

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.

[JimScott]

@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

Drag and Drop for simple Quiz

Thanks for this. I think all of these examples won’t help me as they seem to rely somewhat on innerHTML when indicating the correct answer. Is that right? What I’d like to do is have the dragged element be an image. When the image gets to the correct drop zone I’d like there to be a correct or incorrect indication. Thank you!

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:

How I can make a droppable element in Hype3?

And here’s another page to play with drag&drop! Kokeshi [image] Grab the Hype document overhere kokeshi.hype.zip (6.9 MB)

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