Drag and Drop Payloads not titles (next step)

[TW_Tones]

Bump, I have a possible solution to this Drag and drop content rather than titles
The above thread agreed by @jeremyruston suggested we progress this.

@jeremyruston

It would definitely be useful to extend it with additional attributes to allow arbitrary payloads.

If you look at the dragTiddler option on the button widget the value you give it can be an “arbitrary” tiddler title, that is a title constructed by a variable, or as desired, a “payload” string.

• The Point being the drag mechanisium is focused on the dragging of titles, as a result if this title contains spaces it will be wrapped with [[ ]] to make it comply with titles in tiddlywiki.

The simple addition of a parameter like dragTiddler say dragPayload that does not wrap it in title braces seems to be the solution.

• It should be a simple modification (my guess)

It would be good to add dragPayload to the DraggableWidget as well.

• It may be possible to hack the filter or dragFilter option, but I have not tried it yet.

So the result would be on $button and $draggable tiddler/dragTiddler OR filter/dragFilter Or dragPayload/dragPayload

Why;
I think this has a general application as raised in the thread I referenced, but for now I have made a button to drag a link to a tiddler in the form of a [pretty name](link) to talk.tiddlywiki and markdown tiddlers.

Any assistance would be appreciated. I think its trivial javascript in $button and $draggable widgets.

[Charlie_Veniot]

If of any use, in BASIC Anywhere Machine:

Various kinds of payloads, some statically generated, some dynamically generated (based on creator and modifier tiddler fields.

Tools menu, Payload Exports menu items section, “Adjacent Drag and Drop” menu item.

Two screenshots:

[TW_Tones]

Bump, Once again I have need to solve this.

Although @Charlie_Veniot you implied you have solved this I am not sure where to look.

However I do think there is a strong argument to add the proposed parameters dragPayload to the dragable widget and button, that is a string and not a title list. Eg a section of tiddlywiki script or text.

• That is to give a string and have that draggable
• Set dragPayload to the content of a variable
• The other is to give a text reference eg {{tiddlername!!text}} and treat that as a string

Alternatively an new widget. dragablePayload

It seems quite easy to make something draggable in HTML but we need the ability for it to be dropped and actioned;

<div draggable="true">
My content
</div>

My content

[EricShulman]

I’ve done some complex drag-and-drop handling by using startactions and endactions params to create a temporary tiddler ($:/dragdata) that carries a payload of fields with values.

For example, in TiddlyTools/PasteUp I have $button widgets that are surrounded by $draggable and $droppable widgets that “pack” three values (action, xstart, and ystart) into a temporary $:/dragdata tiddler, like this:

<$draggable tiddler=<<currentTiddler>>
   startactions="""<$action-setfield $tiddler="$:/dragdata"
      action="select grid" xstart=<<x2>> ystart=<<y2>>/>"""
   endactions="""<$action-deletetiddler $tiddler="$:/dragdata"/>""">
<$droppable actions=<<buttondrop>>>
   <$button ... >...</$button>
</$droppable>
</$draggable>

and then <<buttondrop>> “unpacks” the $:/dragdata payload and invokes a specific handler based on the unpacked <<action>> value to process the x1 and y1 values to actually perform the indicated action, like this:

\define buttondrop()
<$let action={{$:/dragdata!!action}} x1={{$:/dragdata!!xstart}} y1={{$:/dragdata!!ystart}}>
<$list filter="[<action>match[select grid]]" variable="none"><<buttondrop_select>></$list>
</$let>
\end

Note how the <<action>> value is used to prevent the <<buttondrop_select>> handler from being invoked for other kinds of drop events (e.g., dragging a tiddler title or some selected text onto the $button widget).

[TW_Tones]

Thanks eric for developing a way to do this. Do you think of it as workaround and that small changes in the widgets could be a better solution? Or do think it a resonable long term solution?

I will work through it to understand it deeply.

I wonder if a new macro or custom widget could be written using your method to provide a simpler to use method with/without modifiying existing code.

Thanks again.

[Edited] So I see the trick is to leverage the draggable startactions to create a temporary storage of parameters you have available, in a tiddler and its fields and endactions to clear it. However before the endaction we are dragging and dropping on to a droppable area containing a button. The actions however on drop are in the buttondrop macro, and after conditions are met, in the “unseen” buttondrop_select macro?

• I think I can see how I can use a variable to store what I want to drop.

I am not longer sure if this is important

• I was hoping to not have to encode the draggable component as I want to use already draggable content in addition to that from sources I control. But this may not be the issue.
• I note that with an editor or field editor open, I can select, drag and drop anything I see, without any tiddler title encoding, so if I could easily click to select without having to use the click and drag method to select, I may find what I need for now;
  • But support for string payloads would be a nice improvement, never the less.

I will keep researching.

[EricShulman]

You can use the $draggable widget’s “tiddler” param to specify any arbitrary string or variable (or macro) value as a payload, like this:

<$draggable tiddler="some text as a string payload">
   drag me #1
</$draggable>

<$draggable tiddler=<<now "DDD, MMM DDth YYYY 0hh:0mm:0ss">>>
   drag me #2
</$draggable>

<$droppable actions="<$action-setfield somefield=<<actionTiddler>>/>">
   <$button style="border:1px solid;height:3em;width:10em;">
      drop stuff here
   </$button>
</$droppable>

SOMEFIELD={{!!somefield}}

enjoy,
-e

[TW_Tones]

Thaks Eric that is what I can use, but my original request is still valid,

I will try and get this into the documentation in a little less hidden.

@TW_Tones

The simple addition of a parameter like dragTiddler say dragPayload that does not wrap it in title braces seems to be the solution.

• It should be a simple modification (my guess)

If I drag “drag me #1” and drop in the text editor, it still wraps it as a title [[some text as a string payload]] any way to defeat this?

<$draggable tiddler="""
<$fill $name=options/>
""">
  `<$fill $name=options/>`
</$draggable>

• If you drag and drop the code it displays it gets wrapped in [[ ]].
• if the draggable widget also has a payload parameter (we could use instead of tiddler) that did not wrap the content given to it, this whole issue would be solved. No workaround needed.

However $:/core/modules/widgets/draggable.js is above my pay grade.