created: 20170328161210552
modified: 20170328204148733
tags: [[Importing Tiddlers]] [[Drag and Drop]] Mechanisms
title: DragAndDropMechanism
type: text/vnd.tiddlywiki

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.

<<.warning """
~TiddlyWiki uses the [[standard HTML 5 drag and drop APIs|https://www.w3.org/TR/2010/WD-html5-20101019/dnd.html]]. However, this is an area that is rightly notorious for cross-browser compatibility problems. Therefore, some features that you might expect to work won't necessarily work in all browsers. In particular, 
""">>

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

There is an additional complexity in the shape of "[[drop effects|https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#drageffects]]":

* The available effects and their meanings are:
** ''move'': the item will be moved from the source location to the the drop location
** ''copy'': the item will be copied from the source location to the the drop location
** ''link'': some form of relationship or connection will be created between the source and drop locations
* Draggable items can indicate which effects are allowed when they are dragged
* Browsers choose which effect to use from those allowed, typically according to modifier keys:
** the ''control'' key switches to a link operation
** the ''shift'' key switches to a move operation
* Droppable items can indicate which effects they will accept