Drag and Drop

drag-and-dropdragdropmatchingsortingassessmentinteractivity

Rippily's drag-and-drop system lets you create matching exercises, sorting activities, labelling tasks, and interactive games. It follows the Storyline 360 model: drag items are elements that participants pick up, and drop zones are areas where items can be placed.

Setting Up Drag Items

Any image or shape element can be made draggable. Select the element and enable Drag in its properties.

Drag Configuration

Option Default Description
Snap Back On Return to starting position if dropped outside any valid zone
Snap to Centre On Snap to the centre of the drop zone when placed
Allow Re-Drag On Allow the item to be picked up again after placement
Clone on Drag Off Create a copy instead of moving the original — for unlimited supply items
Highlight on Drag Over On Show a green glow when hovering over a valid drop zone
Scope Local Local = only the dragger sees the interaction; Global = everyone sees the drag in real-time

Setting Up Drop Zones

Shape elements can be configured as drop zones. Select a shape and enable Drop Zone in its properties.

Drop Zone Configuration

Option Default Description
Accepted Items Empty (any) List of element IDs that are "correct" for this zone. Empty means any item is accepted.
Max Items 1 Maximum number of items this zone can hold
Highlight Mode Dragging When to show the zone highlight: Dragging (only while something is being dragged), Always, or Never

Correctness Checking

The accepted items list is the key to scored activities. When a participant drops an item:

  • If the item's ID is in the zone's accepted items list → correct drop
  • If the item's ID is NOT in the list → incorrect drop
  • If the list is empty → no correctness checking (any item is accepted)

This drives the drop-correct and drop-incorrect triggers, and the corresponding drag item and drop zone states.

Visual Feedback with States

The states system provides automatic visual feedback during drag-and-drop interactions. No extra configuration needed — just define the visual properties for each state.

Drag Item States

  • Dragging: While being carried. Consider a slight scale increase and shadow.
  • Drag Over Zone: While hovering over a valid zone. Consider a green tint or glow.
  • Dropped Correct: After placement in the right zone. Green highlight, checkmark.
  • Dropped Incorrect: After placement in the wrong zone. Red highlight, shake effect.

Drop Zone States

  • Item Hovering: A drag item is hovering over this zone. Subtle highlight or border change.
  • Has Correct Item: Contains a correctly placed item. Green background.
  • Has Incorrect Item: Contains an incorrectly placed item. Red background.

Triggers for Drag Events

Four triggers respond to drag-and-drop events:

  • Drag Enter Zone: Fires when a dragged item enters a zone — useful for preview effects
  • Drop: Fires when any item is dropped — general purpose
  • Drop Correct: Fires on correct placement — play a success sound, add to score
  • Drop Incorrect: Fires on incorrect placement — play an error sound, show a hint

Attach these triggers to actions on the drag items or drop zones to create rich interactive feedback.

Common Patterns

Label Matching

  1. Create image elements for each label (e.g. country names)
  2. Enable drag on each label
  3. Create shape elements for each target area (e.g. countries on a map)
  4. Enable drop zone on each shape, set accepted items to the matching label
  5. Configure drop-correct/drop-incorrect states for visual feedback

Sorting Activity

  1. Create items that need to be sorted (images or shapes with text)
  2. Enable drag on each item
  3. Create category zones (e.g. "Animals" and "Plants")
  4. Set each zone's accepted items to the items that belong in that category
  5. Set max items to accommodate all expected items

Unlimited Supply (Clone on Drag)

For activities where participants need multiple copies of an item:

  1. Enable Clone on Drag on the source item
  2. Each drag creates a copy — the original stays in place
  3. Participants can drag as many copies as needed
  4. Use a Clear Drop Zone action to reset

Scored Activity

  1. Set up drag items and zones with accepted items
  2. Create a number variable $score
  3. On Drop Correct trigger: add 1 to $score
  4. On Drop Incorrect trigger: subtract 1 or show feedback
  5. Display $score in a text element
  6. Add a "Try Again" button with a Clear Drop Zone action

Tips

  • Snap to Centre makes zones forgiving: With snap-to-centre on, items don't need to be placed precisely — just close enough to the zone.
  • Snap Back prevents confusion: When enabled, items return home if dropped outside a zone, so participants don't lose items.
  • Use highlights generously: Both drag-over highlight on items and zone highlights during dragging help participants understand where they can drop things.
  • Test on touch devices: Drag and drop works on both mouse and touch. Test on a tablet or phone to ensure the zones are large enough for finger targets.
  • Scope for collaboration: Set drag scope to global for collaborative sorting activities where everyone contributes to the same board.

What's Next?