Draggable Widget

Text, image, button, and shape widgets can become draggable. When a widget is set to drag mode, learners can pick it up with the mouse or a touch screen and move it into a Drop Bucket. Media players — audio and video — are not draggable: they are something a learner listens to or watches, not something they pick up and sort.

The Drop Bucket is the only widget a draggable can land in. Nothing else on the scene accepts a drop, because the bucket is the only widget that holds an answer key — a drop zone that can't record which items belong in it can only ever count every placement as correct. If you want a drop zone that looks like something else, style the bucket: its fill, border, and label are all yours to set, including a fully transparent one sitting over a background image.

Draggables pair with drop buckets to power sorting, matching, ordering, and categorization activities. The drop bucket decides what counts as correct; the draggable decides what the learner can pick up and where it is allowed to land.

Settings to know

• Drag mode turns the widget into a draggable item. When off, the widget is a normal static element.
• Valid targets lists the drop buckets on this scene that this draggable is allowed to land in. Buckets on other scenes are never offered — a drop is only ever resolved within one scene. A learner cannot drop a draggable into a bucket that is not selected here. If the list is empty, the draggable cannot be dropped anywhere — pick at least one bucket, or draw a connection on the canvas (below), which fills the list in for you.
• Revert to Position controls what happens when a learner releases the draggable outside a bucket, including when pulling it back out of one:
• _On_ snaps it back to where it started.
• _Off_ leaves it on the canvas at the last release point.
• Drag preview is the visual that follows the learner's pointer. By default it mirrors the widget being dragged so the learner sees exactly what they are moving.

How to set it up

1. Add the widget to the scene (any text, image, button, or shape works as a draggable).
2. Open the Properties panel and switch on Drag mode.
3. Draw a connection to the bucket the item belongs in — see Connecting a draggable to its bucket below. You can also pick buckets by hand from Valid targets and mark the answer from the bucket's Correct draggables list.
4. Choose whether Revert to Position should snap the item back when it's released outside a bucket.

Spotting draggables on the canvas

Every widget in Drag mode that is at least 64 px wide and 64 px tall carries a small violet move badge in its top-right corner, always visible. Smaller widgets, like a one-line word card, skip it so it doesn't cover their content; select one and check Drag & Drop in the properties panel instead. It's the same badge style as the count on a drop bucket, so one look at a scene tells you which pieces learners can pick up and how many items each bucket expects. The badge is a marker only — it doesn't respond to clicks, and it never appears for learners.

Connecting a draggable to its bucket

Once a widget is set to Drag mode, a violet link badge appears in the middle of it whenever you select or hover it on the canvas. Drag from that badge to a drop bucket and release: the bucket lights up as you pass over it, and the line stays once you let go.

The badge has a white ring and a soft shadow so it stays readable on top of any artwork — a white shape, a dark one, or a photo. It only appears while the widget is selected or hovered, so it isn't in the way the rest of the time.

That single gesture does two things:

• It marks the draggable as correct for the bucket you connected it to — the same as ticking it in that bucket's Correct draggables list.
• It makes every drop bucket in the scene a legal place to drop the item, so learners can still put it in the wrong bucket and be told so. A sorting activity where the wrong answer is impossible to choose is not really asking the learner anything.

To see what is already wired up:

• Select or hover a draggable to reveal lines to every bucket it is correct in.
• Select or hover a drop bucket to reveal lines from every draggable that belongs in it.

To remove a connection, drag the badge onto the same bucket again — the second drop clears it. You can also untick the item in the bucket's Correct draggables list.

Make each draggable correct in one bucket. A learner can only put an item in one bucket at a time, so an item that is correct in two scored buckets leaves one of them wrong whatever the learner does — publishing reports it as "Buckets Share a Correct Answer". If an item really belongs in two categories, duplicate it and connect each copy to its own bucket.

If publishing warns "Draggable Can't Be Dropped Anywhere"

That warning means this draggable's Valid targets list is empty, so a learner can pick the item up but has nowhere legal to put it down. It does not block publishing — a half-built sorting activity is a normal thing to have mid-edit — but a lesson that ships that way cannot be finished.

To fix it, drag the item's link badge onto the bucket it belongs in, or tick a bucket in Valid targets.

You may see it on an older lesson you didn't just edit. Drop zones used to be allowed on text, image, button, and shape widgets; those aren't drop zones any more, so any draggable that only pointed at one now has an empty list. Point it at a Drop Bucket instead.

Strong use cases

• Sort vocabulary cards into part-of-speech buckets.
• Drag images of animals into "mammal" or "reptile" buckets. Step-by-step: Sort animal pictures into their habitats.
• Order steps of a process by dragging text widgets into numbered slots.
• Spell a word by dragging letter tiles into one slot per letter. Step-by-step: Build a word from letter tiles.
• Match definitions to terms across two columns of drop buckets.

Great pairings with other widgets

• Pair draggables with Drop Bucket — the bucket holds the scoring logic.
• Pair with the Score widget to show learners their points. A bucket scores as a whole — it earns all its points once its Correct when rule is met, or none — so the score counts buckets, not individual items.
• Pair with a Submit Button when you want the bucket to wait for a final answer before grading.

Accessibility

Draggables support keyboard interaction as well as pointer interaction, and a screen reader announces each pick-up, move and drop. It names the item by its alt text (in the Accessibility section of the properties panel), or by a name you gave the widget yourself, like "Red apple". Berdee's own starting names ("Image 3") are never read aloud, because they mean nothing to a learner, so an item with neither is announced as just "item". Give every draggable alt text that describes it, like "A red apple", so screen-reader users know what they are moving. Buckets are announced by their label. When you can, make the draggable surface large enough to be an easy touch target on tablets.

The canvas link badge is a pointer gesture. If you author with a keyboard, use the Valid targets list on the draggable and the Correct draggables list in the bucket's ⚙ Configure panel instead — they set exactly the same thing.