Reveal a <droppable/> element only when dragging (not necesarily hovering)

[Hubert]

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

[Saq Imtiaz]

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;

}

[Saq Imtiaz]

Another option is to use the dragstart actions to set a state tiddler, which in turn is used to set a class around the droppable.

[Hubert]

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

[Hubert]

OK, perfect. I'll give the dragstart actions a try, it sounds promising.

Thanks,

Hubert

[Saq Imtiaz]

Yes the dragstart actions should do what you want.

I've also felt for a while now that there should be a class that is set on the body element in TiddlyWiki when a drag starts.