mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-07-06 20:14:22 +00:00
38 lines
2.4 KiB
Plaintext
38 lines
2.4 KiB
Plaintext
|
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
|