Eventcatcher for drag & drop

#1

I’d like to expand my use of <$eventcatcher> usage beyond the $click event to drag and drop use cases. My real world case is to drag a “task” onto a “date” to assign the date to the task. A simplified example using standard widgets would be something like:

\define dropoptions() <$action-setfield $tiddler=<<actionTiddler>> $field="number" $value=<<number>>/>

<$list filter="[range[1],[31]]" variable="number">
<$droppable actions=<<dropoptions>>>
<<number>>
</$droppable>
</$list>

<ul>
<$list filter="[[Project A]] [[Project B]] [[Project C]]">
<li><$link/>: {{!!number}}</li>
</$list>
</ul>

Here’s an image of how it works dragging the “Project A” link onto the number 10 to assign the field “number” to the value “10”.
image

Does anyone know what the corresponding <$eventcatcher> code would be here?

Over lay tables in tiddly wiki
#2

@stobot is this primarly an exercise to investigate the eventcatcher widget? If not what is your motivation to use it?

  • depending on your requirements the messages catcher and link catcher may also be relavant
  • Although it is quite powerful it does to me make the code harder to follow for many users.
  • another reason I ask is with custom widgets now we could build solutions to common needs into a new widget, for example a list widget alternative you pass the action macro name to.

Just curious :nerd_face:

#3

I’ve built a wiki text only outliner that works pretty well and as the sizes of the outlines increase I’m preparing to consider performance. It’s all keyboard based right now which works well, but now that’s sorted so adding more advanced functionality like moving a branch to another branch or even other outline, which lends itself to mouse movements. I can do with the drop zone functionality, but similarly want it performant for larger outlines.

#4

Can you rule out the use of the other catchers?

  • I may look into it further as a learning exercise so interested in where you are going.
  • It may be out of my depth at this time, I am not sure.
  • Sounds like an interesting project :nerd_face:

Discussion about another outliner Collapsible indented edit preview text

#5

I’ve used <$linkcatcher> and <$messagecatcher> and don’t think they apply for a drag-drop the way that <$eventcatcher> does. In <$eventcatcher> I guessed that I could swap in $mouseover for the usual $click, but unlike a <$droppable> widget that builds a actionTiddler variable automatically, I’m trying to figure out how to convert it using the <$eventcatcher> method.

I think the project will be pretty neat and I’ll share back here. After almost a year away from TiddlyWiki spending time in tools like OneNote, Notion, Obsidian, and Logseq, I’m back trying to incorporate the bits and pieces of those tools into TiddlyWiki for a Project Management Management (not a typo, I manage project managers) solution. In particular the hierarchical method of outlined notes feeding into contextual backlinks (like Logseq) with that flowing into todo assignments etc. will save me a lot of time.

I appreciate the links, I have been following the activities of others closely trying to steal bits and pieces. After a few times being burned though on abandoned plugins, I’ve decided to only use code I write myself (outside of the core). So I have inferior (but simple / fast) versions of many common plugins.

#6

Your example is reminiscent of dropping tasks in a calendar which is easier to visualize for me.

I have an ongoing brief to find a way to do a day schedule with tasks of default or set effort that dynamically responds to inserts and reorder and indicates tolal time.

#7

Hi @stobot, I have investigated similar patterns in the course of work on Streams. Currently you cannot use the $eventcatcher to emulate the $droppable widget’s behaviour. In part this is due to the lack of access to the event.dataTransfer property which holds the payload as to what is being dropped, and partly because the dragenter and dragleave event behaviour is erratic in some browsers and it is quite difficult to address purely in wikitext.

I ended up writing a custom version of the droppable widget that allows for an event delegation pattern to be used for drag and drop. Now that we have JSON operators in the core, I have also extended (privately) the $eventcatcher to provide access to an object holding all enumerable properties of the event object. With that in hand, achieving drop handling in $eventcatcher and pure wikitext might now be possible, but I have not had the opportunity to explore that as of yet and determine if a PR for the core is appropriate.