Multiple dropzones


(Scott) #1

I need to create four drop zones, each with the ability to crop/fill whatever image is loaded into them…


(Jonathan Deutsch) #2

This will require some javascript. Hype has the ability to drag elements, but dropping is up to you. There are some examples of this on the forums, though I don’t see a specific canonical answer. You might check out some of the better examples like this one:

Once you are recognizing a successful drop event, you’ll then need to modify the inner HTML of an element to achieve your crop or fill behavior.


(Scott) #3

This is not quite what I meant. I’m asking about the ability for the user to drag and drop a file image into either of those boxes, then crop or fill it to the width height of the boxes.


(Jonathan Deutsch) #4

Ah; there’s nothing specifically built into Hype to assist in file dragging/dropping, so you should just use the html5 file drag and drop API. There’s articles online showing how to do this. It should be able to be used in conjunction with Hype elements; just make sure you give them a unique element ID and modify them after they’ve been created (like with an On Scene Load event).


(Hans-Gerd Claßen) #5

additionally @MarkHunte posted an example for this kind of stuff on hypedocks