For this example the UI consists of 9 colored square graphics, grouped together in a group name "swatches". The name of each color graphic corresponds to a color. White, gray, black, red, orange, yellow, green, blue and purple.

In addition the UI has a target object, which changes color when a color is dragged onto it. In this example the target is an oval graphic.

The UI also has a explanation field.

You can download the stack for this lesson here: https://tinyurl.com/y9wymtz8

The example is based on the dragData property. The dragData contains whatever is currently being dragged--plain text, styled text, image data, or files--stored in an array whose keys are the data types that you can drag and drop. When the user starts the drag, you set the dragData to whatever is being dragged. When the drag ends, you use the contents of the dragData to perform the appropriate drop action. This example stores the color of the swatch in the "text" element of the dragData. When the user drops the swatch onto the "ball" graphic, the graphic's backgroundColor is set to the color name stored in the dragData.

The mouseDown message is sent whenever the user clicks, to whatever object was clicked. In the demo, each swatch is a graphic, and the graphics have been placed in a group. The mouseDown handler is placed in the group's script so it doesn't have to be repeated in each graphic's script.

When the mouseDown message is sent to a swatch, it is passed on to the group, where it triggers the mouseDown handler. This mouseDown handler sets the dragData property, which specifies the data to be dragged and dropped. For instance, if you are dragging text, that text is the contents of the dragData. In this example, the handler sets the "text" element of the dragData to the name of the swatch the user clicked. This is the data that will be received when the swatch is dropped onto an object.

This mouseDown handler also sets the swatch's borderWidth to 3. This line is not an essential part of the drag and drop operation. The user interface of a drag and drop is not as standard as other aspects of user interface; it can be useful to indicate visually that an object is the subject of a drag. In this example, we've widened the border around the swatch that's being dragged to provide a visual hint to the user during the drag and drop. We'll set the borderWidth back to 1 when the drag is over.

When the mouse enters an object during the drag, a dragEnter message is sent to the object. The dragEnter handler in this example, which is placed in the "ball" graphic, simply sets the acceptDrop property to true. The acceptDrop property determines whether the current object is "droppable". If the property is false, no dragDrop message is sent when the user releases the mouse button, so you can't drop. If the property is true, the dragDrop message is sent.

Note: Revolution automatically sets the acceptDrop to true when dragging text between unlocked fields. If you want to be able to drop data onto any other kind of object, you need to set the acceptDrop to true when the mouse pointer enters the object.

When the user releases the mouse, a dragDrop message is sent to the graphic, triggering the dragDrop handler. In this example, the dragDrop handler retrieves the "text" element of the dragData (which we previously set in the mouseDown handler) and uses it to set the graphic's backgroundColor. The graphic now matches the color of the swatch the user dragged.

Finally, when the drag is finished, a dragEnd message is sent to the object that originated the drag and drop. In this case, that object is the swatch that the user dragged.

The dragEnd handler in this example sets the borderWidth of the dragged swatch back to 1. For simple drag and drop operations, you may not need to handle the dragEnd message at all.

on mouseDown
  set the dragData["text"] to the short name of the target
  set the lineSize of the target to 3
end mouseDown

on dragEnd
  set the lineSize of the target to 1
end dragEnd

on dragEnter
  set the acceptDrop to true
end dragEnter

on dragDrop
  set the backgroundColor of the target to the dragData["text"]
end dragDrop