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

DraggableWidget

 15th July 2022 at 12:02pm

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

AttributeDescription
tiddlerOptional title of the payload tiddler for the drag
filterOptional filter defining the payload tiddlers for the drag
tagOptional tag to override the default "div" element created by the widget
selector New in: 5.2.2 Optional CSS Selector to identify a DOM element within the widget that will be used as the drag handle
classOptional 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 New in: 5.2.3 Optional value "no" to disable the draggable functionality (defaults to "yes")
startactionsOptional action string that gets invoked when dragging starts
endactionsOptional action string that gets invoked when dragging ends
dragimagetype New in: 5.2.0 Optional type of drag image: dom (the default) or blank to disable the drag image

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.

Note that the actionTiddler Variable holds a Title List quoted with double square brackets. This is unlike the DroppableWidget which uses the same variable to pass a single unquoted title.

When specifying a DOM node to use as the drag handle with the selector attribute, give it the class tc-draggable in order for it to have the appropriate cursor and the attribute draggable with the value true to make it draggable.

The LinkWidget incorporates the functionality of the DraggableWidget via the draggable attribute.

New in: 5.2.3 The following variables are accessible in the startactions and the endactions:

VariablesDescription
modifierThe 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-coordsA co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node that's being dragged where the event originated
tv-selectednode-posxx offset position of the dragged DOM node
tv-selectednode-posyy offset position of the dragged DOM node
tv-selectednode-widthoffsetWidth of the dragged DOM node
tv-selectednode-heightoffsetHeight of the dragged DOM node
event-fromselected-posxx position of the event relative to the dragged DOM node
event-fromselected-posyy position of the event relative to the dragged DOM node
event-fromviewport-posxx position of the event relative to the viewport
event-fromviewport-posyy position of the event relative to the viewport