Hello everyone! Is there a way to create a droppable element in hype 3 without using jQueryUI?
How I can make a droppable element in Hype3?
You could set an element to Drag in âActionâ inspector and select âControl Element Positionâ. When you let the mouse up it would be similar to a drop.
drop.hype.zip (10.4 KB)
you can drop it, but you cannot i.e. let it count how often without using javascript.
also it can be moved then again.
You could also use Hypeâs âhypeGesturePhaseâ to do a drag and dropâŠ
Drag_Drop-hypeGesturePhase.hype.zip (12.7 KB)
Hi Greg,
It works on desktop browser but through Hype Reflect, it shows that action is triggered even if black box is dropped anywhere on screen (and not specifically on red square)
Yes, you would have to add some coordinate bounds (X,Y) to the javascript to limit when the timeline action runs. I just wanted to show that Hype does have some drag & drop capability built in.
I get it.
Do you think it could be possible to trigger the timeline by checking wether the black box overlaps the red circle ?
Yes, be aware that different screen sizes will need to be considered. My screen size is 1600X900 px. Iâm using âgetBoundingClientRectâ in the javascript, but it may work better if you use âoffsetLeft or offsetTopâ.
hereâs a sampleâŠ
Drag_Drop-hypeGesturePhase1.hype.zip (12.9 KB)
Try adjusting the number in the script â" if (squareRect.left >= 987) "â the 987 is the amount of pixels from the left side of my screen in Safari, but your screen size will be different. It can be done, but it is not a very dependable method because of screen sizes are always going to be different.
Thanks Greg,
It works when I make adjustments but youâre right, itâs a very useless method
I wouldnât go as far as to say itâs useless, it could work very well if you need to measure from the top of a screen.
Hereâs a demo using âoffsetâ in the javascript. It gets the distance from the left side of the Hype window not the Browser window (in this demo the Hype window is 600px wide by 400px height).
offset_action.hype.zip (12.4 KB)
Thereâs a way in javascript to make another element a droppable one.
You would need these:
if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseStart) {}
if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {}
I build demo from a page from an interactive picturebook app. Itâs in the Tumult Hype Gallery and called Noaâs Stars. You can download the document overhere
Take a look at the âfDragDropâ function.
Youâre welcome guys! Iâm working on another interactive picturebook right now. Also with a drag&drop page. Iâll upload it here when itâs finished.
And hereâs another page to play with drag&drop!
Kokeshi
Grab the Hype document overhere
kokeshi.hype.zip (6.9 MB)
Drag and drop code advice
Drag and Drop exercise
Drag and Drop question
Need your Help with Drag n Drop!
At the end of an On Drag Action can a Timeline be triggered?