0
Completed

Drag and drop behavior

Moshe Caine 6 years ago in By Screen / Interact updated by Inna Komarovsky 5 years ago 8

It would be great to have a drag and drop behavior where one may define the drop area. When the object is dropped to said area, an action may take place ( a sound, a response text, a picture, etc.).

Answer

Answer
Completed

This should be the idea you want to implement.

186 - Drag Drop.zip

When you drag the butterfly above the good area a sound will play. When you drag the butterfly above the bad area the butterfly will bounce back.

one possiblity may work if you made an element the size of the area you want the object dropped and make it 0% opacity then use an intersection of the dragged item with the "invisable area" to make the sound play, text or picture appear or all

Good idea. I'll give it a try.

Completed

This should be the idea you want to implement.

186 - Drag Drop.zip

When you drag the butterfly above the good area a sound will play. When you drag the butterfly above the bad area the butterfly will bounce back.

Answer
Completed

This should be the idea you want to implement.

186 - Drag Drop.zip

When you drag the butterfly above the good area a sound will play. When you drag the butterfly above the bad area the butterfly will bounce back.

I would love to see the Drag Drop app, but it appears to not be available.  Any update for 4.0?
Hi Steven,
We have a quick tutorial video about putting together the drag and drop effect here: Hat Tutorial: the "Snap into Place" Effect.

To check out the app from the video in InteractBuilder, you can download the app folder here: Drag and Drop.
Great!  Thanks Inna.  Is it possible to make a button (such as NEXT ) when several correct intersections occur?  In other words, I want progressively difficult levels with each level only being available after the correct intersection is placed.  
You're welcome! If you want to make a "next" button appear once everything has been placed, add a counter to the page, and add a point to the counter each time a correct intersection occurs (using the CounterAdd behavior for each intersection). To the "next" button, add the following action set:
Interaction: (none)
Behavior: Show (or FadeIn or Animate onto the screen, etc.)
Target: (Self)
Condition: {Page Counter} Is {Value}
Element: the counter that you added
Value: the number of elements that need to be placed to complete the activity

Let me know if you'd like to see an example app of this effect!