Thank you Saq. The droppable element is now showing when I'm dragging an element over it. However, I'd like it to show *the very moment I start dragging*, so even *before* I've hovered it over the area of the droppable <span>.
Is that possible? Thanks again, Hubert On Wednesday, 20 January 2021 at 11:52:27 UTC [email protected] wrote: > If the element isn't visible or doesn't have dimensions, it wont receive > the dragover > > Try something like this: (untested code) > > \define OnDrop() > <$some-actions-here/> > \end > > <$list filter="[list[!!list]]" variable="list_item"> > <$draggable tiddler=<<list_item>>> > <li><<list_item>></li> > </$draggable> > </$list> > > <div class="show-on-dragover-only"> > <$droppable actions=<<OnDrop>>><span>Drop here</span> > </$droppable> > </div> > > and > > .show-on-dragover-only > .tc-droppable > span { > visibility: hidden; > } > > .show-on-dragover-only > .tc-droppable.tc-dragover > span{ > visibility: visible; > } > > > On Wednesday, January 20, 2021 at 12:17:20 PM UTC+1 Hubert wrote: > >> >> Hi, >> >> I'm trying to make a <div> only show when a draggable element is being >> dragged. >> >> I have some list items and a div with the class "show-on-dragover-only" >> below. That div should stay invisible (either through CSS or the <$reveal/> >> mechanism) until the moment I started dragging any of the list items (the >> sole action of *dragging *should be the trigger, not hovering over the >> droppable element -- hovering is trivial with CSS pseudoclasses and that's >> not what I'm looking for). I assume I have to somehow target the >> .tc-dragover class but I could not make it work. >> >> Here's my minimal use case: >> >> \define OnDrop() >> <$some-actions-here/> >> \end >> >> <$list filter="[list[!!list]]" variable="list_item"> >> <$draggable tiddler=<<list_item>>> >> <li><<list_item>></li> >> </$draggable> >> </$list> >> >> <div class="show-on-dragover-only"> >> <$droppable actions=<<OnDrop>>> >> Drop here >> </$droppable> >> </div> >> >> And the CSS (which does not work): >> >> .show-on-dragover-only { >> display: none; >> } >> >> .show-on-dragover-only > .tc-droppable.tc-dragover div { >> display: block; >> } >> >> Thank you in advance for your hints. >> >> Regards, >> Hubert >> > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/b77f23c5-98aa-4f74-84ea-66c34afb744bn%40googlegroups.com.
