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:

1. The user clicks down and drags the pointer on a draggable element such as the DraggableWidget, ButtonWidget or LinkWidget
2. The draggable element moves with the mouse pointer until the click is released
3. Moving the pointer over droppable elements such as the DroppableWidget displays a highlight indicating that the item can be dropped
4. The configured actions are performed if the drag ends on a droppable element