Now that we know how to make things move around with Drag, and how to keep them corralled into a specific area with Constrain, let´s make all this dragging mean something by using Collision Detection.

Collision Detection is a method by which we can cause Actions to be triggered by a draggable object coming into contact with another element. The example above demonstrates very basic Collision Detection - if you drag the “Drag Me!” object so that it intersects with the “Cool Stuff” image, the “Cool Stuff” image will change its appearance. (Click on the “Cool Stuff” icon to change it back.)

Here´s how I did it:

1. Create three object  on your page - a “container” layout object, the object to be dragged and the object which that draggable object will “collide” with .
2. Create the following Action for the “collide” object - the object labelled ”Cool Stuff” in the sample above (for this demo, I´ve named “collide” in the “Name” field of the Actions tab):

   When -> Page -> Page Loaded Target -> (collide) Message -> Object -> Set Image Parameter(s) -> Values...

   ... and set the “Highlighted” image for this object the same way you would for a Rollover button. This gets a few steps from now...
3. Create the following Actions for the draggable object  labelled “Drag Me!” in the sample above (which, for this demo, I´ve named “dragobject” in the “Name” field of the Actions tab):

   When -> Page -> Page Loaded Target -> (dragobject) Message -> Drag -> Constrain Drag Parameter(s) -> To Container Object

   ... this keeps the “dragobject” within the layout region.

   When -> Custom -> Edit...    (and create a Custom Message called “Bounce”) Target -> (collide) Message -> Use Image Parameter(s) -> Image2 (Highlighted)

   ... When the “Bounce” message is sent to the “dragobject” object (we´ll do this in a minute), we´ll change the “collide” object so that it uses the “Highligted” image (which we set up in Step 2). And finally...

   When -> Page -> Page Loaded Target -> (dragobject) Messge -> Drag -> Set Collision Detection Parameter(s) -> Values...

   ... and this is where things get a little complicated. Let´s break out each parameter and explain what´s going to happen with it:...

   Field Name What it means Value for the Example Object ID the name of the object you plan on colliding with collide That´s the name of the object the “dragobject” will collide with. When When the collision is detected, either for a“Drag” (the item is being dragged) or a “Drop” (the draggable item is no longer being dragged. Drag The Collision Detection will be set off while the “dragobject” is being dragged. Type Collision Detection is set off if the element is in intersection with the target object (or not), contained by the target object (or not), contans the target object (or not) or if the mouse is inside the target object (or not) intersection The “dragobject” has to be in contact with the “collide” object in order to set off the Collision Detection Message The Custom Message which will be sent to the object which this Action is attached to when the Collision Detection is set off. . Bounce When a collision is detected (that is, when the “dragobject” is intersecting with the “collide” object), the Custom Message “Bounce” will  be sent to the “dragobject”

   ... Phew :)

Now, if you wanted to make things even more exciting, you could create two more Actions for the “dragme” object - one for a Custom Message called, say “nobounce” which would set the image for the “collide” object back to Image 1 (Normal), and one which would set a Collision Detection for when the “collide” object is not intersected by the “dragme” object. Take a look at the information above and see if you can work it out - it´s actually a lot simpler than it sounds...