mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-15 22:34:51 +00:00
c9b8319801
* pass the modifier keys as variables * Update DroppableWidget.tid * Create modifier Variable.tid * closing bracket got lost
57 lines
3.6 KiB
Plaintext
57 lines
3.6 KiB
Plaintext
caption: droppable
|
|
created: 20170406082820317
|
|
modified: 20170406085304387
|
|
tags: Widgets
|
|
title: DroppableWidget
|
|
type: text/vnd.tiddlywiki
|
|
|
|
\define droppable-image-actions()
|
|
<$action-setfield $tiddler=<<actionTiddler>> $field="icon" $value=<<currentTiddler>>/>
|
|
\end
|
|
|
|
\define colour-demo-body()
|
|
<$droppable actions=<<droppable-colour-actions>>>
|
|
<span style="display: inline-block; width: 1em; height: 1em;background-color: $(currentTiddler)$;">
|
|
</span>
|
|
</$droppable>
|
|
\end
|
|
|
|
\define droppable-colour-actions()
|
|
<$action-setfield $tiddler=<<actionTiddler>> $field="color" $value=<<currentTiddler>>/>
|
|
\end
|
|
|
|
The `droppable` widget creates a DOM element onto which dragged items can be dropped by the user, triggering the specified actions. It only works on browsers that support drag and drop, which typically means desktop browsers, but [[there are workarounds|Mobile Drag And Drop Shim Plugin]].
|
|
|
|
See DragAndDropMechanism for an overview.
|
|
|
|
! Content and Attributes
|
|
|
|
|!Attribute |!Description |
|
|
|actions |Actions to be performed when items are dropped |
|
|
|class |Optional CSS classes to assign to the draggable element. The class `tc-droppable` is added automatically, and the class `tc-dragover` is applied while an item is being dragged over the droppable element |
|
|
|tag |Optional tag to override the default of a "div" element when the widget is rendered in block mode, or a "span" element when it is rendered in inline mode |
|
|
|
|
Within the action string, there are two Variables generated by the DroppableWidget:
|
|
|
|
* The [[actionTiddler Variable]] contains the title of the item being dropped
|
|
* The [[modifier Variable]] contains the Modifier Key held while dragging (can be normal, ctrl, shift or ctrl-shift)
|
|
|
|
If multiple items are dropped then the actions are performed repeatedly, once for each dropped item.
|
|
|
|
! Examples
|
|
|
|
This example displays a palette of icons. Dragging a tiddler onto one of the icons assigns that icon to the tiddler.
|
|
|
|
<$list filter="[all[tiddlers+shadows]tag[$:/tags/Image]sort[title]]">
|
|
<$droppable actions=<<droppable-image-actions>>>
|
|
<$transclude/>
|
|
</$droppable>
|
|
</$list>
|
|
|
|
Similarly, this example shows a palette of colours. Dragging a tiddler onto one of the colours assigns that colour to be used for rendering the icon of the tiddler.
|
|
|
|
<$list filter="LightPink Pink Crimson LavenderBlush PaleVioletRed HotPink DeepPink MediumVioletRed Orchid Thistle Plum Violet Magenta Fuchsia DarkMagenta Purple MediumOrchid DarkViolet DarkOrchid Indigo BlueViolet MediumPurple MediumSlateBlue SlateBlue DarkSlateBlue Lavender GhostWhite Blue MediumBlue MidnightBlue DarkBlue Navy RoyalBlue CornflowerBlue LightSteelBlue LightSlateGrey SlateGrey DodgerBlue AliceBlue SteelBlue LightSkyBlue SkyBlue DeepSkyBlue LightBlue PowderBlue CadetBlue Azure LightCyan PaleTurquoise Cyan Aqua DarkTurquoise DarkSlateGrey DarkCyan Teal MediumTurquoise LightSeaGreen Turquoise Aquamarine MediumAquamarine MediumSpringGreen MintCream SpringGreen MediumSeaGreen SeaGreen Honeydew LightGreen PaleGreen DarkSeaGreen LimeGreen Lime ForestGreen Green DarkGreen Chartreuse LawnGreen GreenYellow DarkOliveGreen YellowGreen OliveDrab Beige LightGoldenrodYellow Ivory LightYellow Yellow Olive DarkKhaki LemonChiffon PaleGoldenrod Khaki Gold Cornsilk Goldenrod DarkGoldenrod FloralWhite OldLace Wheat Moccasin Orange PapayaWhip BlanchedAlmond NavajoWhite AntiqueWhite Tan BurlyWood Bisque DarkOrange Linen Peru PeachPuff SandyBrown Chocolate SaddleBrown Seashell Sienna LightSalmon Coral OrangeRed DarkSalmon Tomato MistyRose Salmon Snow LightCoral RosyBrown IndianRed Red Brown FireBrick DarkRed Maroon White WhiteSmoke Gainsboro LightGrey Silver DarkGrey Grey DimGrey Black">
|
|
<<colour-demo-body>>
|
|
</$list>
|
|
|