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
| Attribute | Description |
|---|---|
| actions | Actions to be performed when items are dropped. It activates 1 action per item |
| listActions | New in v5.3.4 Actions to be performed when items are dropped. It activates 1 action for a the whole list of items |
| class | Optional 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 |
| tag | Optional 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 |
| enable | Introduced 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, the following variables are generated by the DroppableWidget:
| Variables | Description |
|---|---|
actionTiddler | For parameter actions, the actionTiddler Variable contains the title of the item being dropped |
actionTiddlerList | For parameter listActions the actionTiddlerList Variable contains a Title List of all the items being dropped |
modifier | The modifier Variable contains the modifier key held while dragging (can be normal, ctrl, shift or ctrl-shift) |
Examples
This example displays a palette of icons. Dragging a tiddler onto one of the icons assigns that icon to the tiddler.
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.
Drag the tag pill or a single tiddler link HelloThere into the "Drop Area" below. It will show the "Title List" stored in $:/temp/drop/TitleList