EventCatcher with drag-and-drop

#1

While thinking how to answer Over lay tables in tiddly wiki , I was trying to combine the EventCatcher with drag-and-drop. And it doesn’t seem to be working.

This code properly catches a click event on a button and notifies the user:

\define my-actions()
<$action-sendmessage $message="tm-notify" $param="click-message" />
\end

<$eventcatcher selector="button" $click=<<my-actions>> >
  <button text="alpha">alpha</button>
  <button text="bravo">bravo</button>
  <button text="charlie">charlie</button>
  <button text="delta">delta</button>
  <button text="echo">echo</button>
</$eventcatcher>

But this code does not notify the user when an item in a sortable list is dropped:

\define my-actions()
<$action-sendmessage $message="tm-notify" $param="drop-message" />
\end

!!! Drag to reorder

<$eventcatcher selector=".tc-droppable-placeholder" $drop=<<my-actions>> >
<<list-tagged-draggable tag:"MyTag" >>
</$eventcatcher>

Is this because of the selector, .tc-droppable-placeholder? (I’ve also tried .tc-droppable and .tc-dragover, with the same behavior.) Is there something else subtly wrong with this? Or does the event catcher simply not handle drop events?

I vaguely remember seeing something about this recently and someone (perhaps @saq?) was working on it, but I’m really fuzzy on the details.

Download this and drag it to a wiki to see this in (in-)action: drop-event-catcher.json (1.9 KB)

#2

I understand all the catchers trap the event and you need to then provide the actions to replace them.

You are using the “utility macro list-tags-dragable” where you may be better off expanding that in your own code, then seeing if you can get the two to work together.

I have used drag and drop a few times successfully but the documentation could be better for a broader audience but I am not yet expert enought to rewite it yet. I just muddle along and eventualy get it. One thing to my approach is

  • dont use utility macros in your solution because they do not nessasarily intergrate well.

I am sure @saq knows better but this info may help you move forward.

So do consider contributing to the doco after your achive this.

Other sorts of Documentation
#3

Hi Scott, I suspect the issue you are running into is that the list-tagged-draggable macro uses $droppable widgets that handle the drop event and prevent it from propagating to the $eventcatcher widget. Instead you need a custom widget that has a dragover handler that allows the drop event, but does not handle the drop event itself or allows it to propagate. I have worked on this and providing access to the dataTransfer object for drop events in eventcatcher, but I feel like we can do better for the core so have not yet prepared a PR for it.

1 Like
#4

Well that would explain a lot!

I’m still struggling through the drag-and-drop documentation, especially as this is fairly low priority for me. But one open question: is it true that the only draggable content is a tiddler or a list of them? I’m pretty sure that’s right, but coming from the vanilla JS world, this is something that just wasn’t coming to me.

Is this something you’d be willing to share, even in an incomplete state? Even if it’s just to satisfy my curiosity, I would be very interested in seeing it.

Yes, I’ve struggled with the documentation around this and haven’t figured it out yet. I would like to understand it for myself eventually, but the impetus was simply to use this question to help myself learn something new… but that puts it below the day job, the current side projects, family time, and numerous other commitments. So I’m curious and may spend some more time on it, but won’t commit to it.

I started responding to this, and realized that I’d wandered far off-topic. You can see my thoughts in a separate thread.

1 Like