Drag and drop item scales item dropped on

Hi there,

I've started creating a simple quiz and the user drags the question either left or right over static yes or no images. Onced dragged and dropped the answer page is triggered. All works fine thanks to some very helpful people on this forum!! My client now wants the static yes/no images to scale up as the question gets dragged ontop. I've been searching this forum and google and am not getting anywhere – so I once again ask if anyone can help? Thanks in advance. Bob

i'd assume that you have some Hyperelated code running that acts on drop. you'd have to extend it to also work while hypeDocument.kHypeGesturePhaseMove is the current state ...

that said asimplyfied example of what you're actually doing/trying is always fine :slight_smile:

I'm afraid I don't understand, sorry :frowning:

I am using some custom behaviours to Jump to a scene which happens once the question is dropped on the yes no icons ... I also can't seem to find a way of adding screen shot so you can see what I'm doing! Really sorry – I'm a total beginner!

how do you detect a drop on a specific element?

I'm using the Hypedraganddropenabler.js and additional HTML Attributes

ah, there's been an updated version that includes firing on intersections between elements: Hypespecific Drag and Drop Enabler - #14 by h_classen

Okay, I'll have a look :slight_smile: Many thanks!

Will it be easy to swap out the existing enabler with the new one? Slightly scared!

I'd say so ... :slight_smile:

1 Like

Hey there

Replaced the Enabler.js and my worst fears have been realised – now the drag works but nothing else :frowning: I have downloaded your jungle quiz/game which is superb, but I just can't work out how to get it all working again and how to get the drop zone graphic to scale up as the dragged item gets near/on top .. or get it working again where as it drops it triggers a new page ...

Completely lost as they say... sorry

my link above included the description for the changed setup. did you realize that?

how i would proceed:

  1. create a backup of your working file
  2. include the new/changed script (adding '?xyz' to the url will bypass the browsercache ...)
  3. change all data-attributes according the to the changes (test your new file here here :slight_smile: )
  4. add the data-attributes for the intersections, create the corresponding behaviors ...

basic example
example.hype.zip (41,8 KB)

This worked! I beleive it may have been the data-dropcustombehavior that was causing the issue :thinking: Thank you so much for the example – will now try to scale up/down using the data-intersectcustombehavior and 2 custom behaviours

You have been so helpful. Thank you. I'll let you know how it goes :+1:

Me again sorry!

Quick question – I've gone back to square one again and now nothing is even dragging let alone dropping and triggering custom behaviours – all I did was change the graphics for the drop 'zone' from an image to an elipse .. anyway, going to start again from the previous file that worked and still works but do I need to include this file

intersection-observer.js

I didn't before when it was all working and just noticed it in your kind example ...

Sorry to be pain but I'm getting very frustrated on something that shoudl be very straightforward!

Thanks, Bob

it's a polyfill ...

take it or leave it :slight_smile:

... and sry, but i do not understand the rest of your post :frowning:

//////

it's good practice to provide a simplyfied setup for a hypefile. Makes it easier to understand what's going on in custom setups...

Okay – I've realised that the Enabler.js needs the 'include in header' checked to make it all work. So now I have something working I'd like to share with you. Very much work in progress!!! Hopefully you can see that dragging the question graphic over YES on the right scales up nicely and moves to the answer page okay. But the NO won't scale up but will go to the answer page ... It's probabaly something very simple I've messed up but would you mind looking over for me?

Many thanks, Bob
TestFile.zip (1002.8 KB)

hope this'll work. :slight_smile:
swiper.hype.zip (1,1 MB)

loading the scripts in the right order and only once is important
setting the data-attributes exact as in the documentation is important
avoid scaling if possible and making drag and drop of the same dimensions should bring best results ... in your case perhaps even make them bigger, to get earlier response

2 Likes