ActionLogWidget and DraggableWidget

#1

Is there any way to log the debug information while dragging? In other words I want to use the action-log to collect some information during drag and drop!

#2

You can use $action-log in the start and enedactions for the $draggable widget.

1 Like
#3

I cannot understand why the startactions and endactions don’t trigger in the below code.

\define my-dragstart() <$action-setfield $tiddler=tempdrag $field=start $value=<<actionTiddler>> />
\define my-dragend()   <$action-setfield $tiddler=tempdrag $field=end   $value=<<now>>           /> <$action-log myVar=<<actionTiddler>> />

<$droppable>
<$list filter="[tag[HelloThere]]">
  <$draggable tiddler=<<currentTiddler>> startactions=<<my-dragstart>> endactions=<<my-dragend>> dragimagetype="blank">
    <div title="some tooltip">
      <$link/>
    </div>
  </$draggable>
</$list>
</$droppable>

To give a try

  1. download Draggable-Actions and Debug Info.json (693 Bytes)

  2. drag and drop into https://tiddlywiki.com

  3. open the imported tiddler Draggable-Actions and Debug Info tiddler from step 2 and try to drag a title in the list over other one

  4. open Browser Console

  5. nothing is logged

It seems the startactions and endactions are not triggered at all.

p.s: this is a minimal demo code and is meaningless

#4

You are using links in your code, which are also draggable and when dragged have their own handling. So the $draggable widget DOM node is not what is being dragged, the link is being dragged.

You can either set draggable=“no” on the $link widgets, or use a different element instead of links like $text. (Edit: using the link widget is still problematic due default browser behaviour for links and dragging, code below updated).

\define my-dragstart() <$action-setfield $tiddler=tempdrag $field=start $value=<<actionTiddler>> />
\define my-dragend()   <$action-setfield $tiddler=tempdrag $field=end   $value=<<now>>           /> <$action-log myVar=<<actionTiddler>> />

<$droppable>
<$list filter="[tag[HelloThere]]">
  <$draggable tiddler=<<currentTiddler>> startactions=<<my-dragstart>> endactions=<<my-dragend>> dragimagetype="blank">
    <div title="some tooltip">
      <$text text=<<currentTiddler>>/>
    </div>
  </$draggable>
</$list>
</$droppable>

If you still want them to look like links:

\define my-dragstart() <$action-setfield $tiddler=tempdrag $field=start $value=<<actionTiddler>> />
\define my-dragend()   <$action-setfield $tiddler=tempdrag $field=end   $value=<<now>>           /> <$action-log myVar=<<actionTiddler>> />

<$droppable>
<$list filter="[tag[HelloThere]]">
  <$draggable tiddler=<<currentTiddler>> startactions=<<my-dragstart>> endactions=<<my-dragend>> dragimagetype="blank">
    <div title="some tooltip">
      <button class="tc-btn-invisible tc-tiddlylink"><$text text=<<currentTiddler>>/></button>
    </div>
  </$draggable>
</$list>
</$droppable>

Also see Draggable links by theSherwood · Pull Request #3710 · Jermolene/TiddlyWiki5 · GitHub

1 Like
#5

Hi Saq,
Thank you very much for clarification and your detailed example.
Now it works as expected.

Thank you