The DraggableWidget creates a DOM element that can be dragged by the user. It only works on browsers that support drag and drop, which typically means desktop browsers, but there are workarounds.
The draggable element can be assigned a list of tiddlers that are used as the payload. If desired it can invoke actions when dragging starts and when it ends. See DragAndDropMechanism for an overview.
Content and Attributes
| Attribute | Description |
|---|---|
| tiddler | Optional title of the payload tiddler for the drag |
| filter | Optional filter defining the payload tiddlers for the drag |
| tag | Optional tag to override the default "div" element created by the widget |
| selector | Introduced in v5.2.2 Optional CSS Selector to identify a DOM element within the widget that will be used as the drag handle |
| class | Optional CSS classes to assign to the DOM element created by the widget. The class tc-draggable is added to the the DOM element created by the widget unless the selector attribute is used. The class tc-dragging is applied to the DOM element created by the widget while the element is being dragged |
| enable | Introduced in v5.2.3 Optional value "no" to disable the draggable functionality (defaults to "yes") |
| startactions | Optional action string that gets invoked when dragging starts |
| endactions | Optional action string that gets invoked when dragging ends |
| dragimagetype | Introduced in v5.2.0 Optional type of drag image: dom (the default) or blank to disable the drag image |
| 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 |
Either or both of the tiddler and filter attributes must be specified in order for there to be a payload to drag.
The actionTiddler Variable is accessible in both startactions and endactions. It holds the payload tiddler(s) specified through the tiddler and filter attributes as a Title List using double square brackets to quote titles that include whitespace.
The LinkWidget incorporates the functionality of the DraggableWidget via the draggable attribute.
Introduced in v5.2.3 The following variables are accessible in the startactions and the endactions:
| Variables | Description |
|---|---|
modifier | The modifier Variable contains the Modifier Key held while dragging |
dom-* | All DOM attributes of the node being dragged are made available as variables, with the prefix dom- |
tv-popup-coords | A relative co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated (see Coordinate Systems for more information) |
tv-popup-abs-coords | Introduced in v5.2.4 An absolute co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated (see Coordinate Systems for more information) |
tv-selectednode-posx | x offset position of the dragged DOM node |
tv-selectednode-posy | y offset position of the dragged DOM node |
tv-selectednode-width | offsetWidth of the dragged DOM node |
tv-selectednode-height | offsetHeight of the dragged DOM node |
event-fromselected-posx | x position of the event relative to the dragged DOM node |
event-fromselected-posy | y position of the event relative to the dragged DOM node |
event-fromviewport-posx | x position of the event relative to the viewport |
event-fromviewport-posy | y position of the event relative to the viewport |