This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

DroppableWidget

 21st November 2023 at 10:14am

The droppable widget creates a DOM element onto which dragged items can be dropped by the user, triggering the specified actions. It only works on browsers that support drag and drop, which typically means desktop browsers, but there are workarounds.

See DragAndDropMechanism for an overview.

Content and Attributes

AttributeDescription
actionsActions to be performed when items are dropped
classOptional CSS classes to assign to the draggable element. The class tc-droppable is added automatically, and the class tc-dragover is applied while an item is being dragged over the droppable element
tagOptional tag to override the default of a "div" element when the widget is rendered in block mode, or a "span" element when it is rendered in inline mode
enableIntroduced in v5.1.22 Optional value "no" to disable the droppable functionality (defaults to "yes")
data-*New in v5.3.2 Optional data attributes to be assigned to the HTML element
style.*New in v5.3.2 Optional CSS properties to be assigned to the HTML element

Within the action string, there are two Variables generated by the DroppableWidget:

If multiple items are dropped then the actions are performed repeatedly, once for each dropped item.

Tip
Note that the actionTiddler Variable holds a single, unquoted title. This is unlike the DraggableWidget which uses the same variable to pass a quoted Title List.

Examples

This example displays a palette of icons. Dragging a tiddler onto one of the icons assigns that icon to the tiddler.

6

Similarly, this example shows a palette of colours. Dragging a tiddler onto one of the colours assigns that colour to be used for rendering the icon of the tiddler.