6th April 2017 at 8:58am
This tiddler discusses the internal mechanisms that are used to implement drag and drop features in TiddlyWiki. See Drag and Drop for a general description of the features.
The following widgets are concerned with drag and drop features:
- The DraggableWidget creates a draggable element that represents one or more tiddlers for dragging
- The ButtonWidget and LinkWidget incorporate the functionality of the DraggableWidget
- The DroppableWidget creates an area into which tiddlers can be dragged to trigger customisable actions
- The DropzoneWidget handles importing external tiddlers from files or by drag and drop from another browser window
The general sequence of a drag and drop operation is as follows:
- The user clicks down and drags the pointer on a draggable element such as the DraggableWidget, ButtonWidget or LinkWidget
- The draggable element moves with the mouse pointer until the click is released
- Moving the pointer over droppable elements such as the DroppableWidget displays a highlight indicating that the item can be dropped
- The configured actions are performed if the drag ends on a droppable element