OK, perfect. I'll give the dragstart actions a try, it sounds promising. Thanks, Hubert
On Wednesday, 20 January 2021 at 12:43:22 UTC Hubert wrote: > 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/f67319cf-b817-4ea9-8f6e-8bed9beb95e9n%40googlegroups.com.
