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/3d0c8cc5-0cfb-472d-bc0f-5093a249a316n%40googlegroups.com.
