How to force display of drag & drop handle with mv-list / mv-list-item ?

[GalinhaLX]

Hi everyone, hope you're all fine

When using mv-list / mv-list-item in <ul> <li> elements:

I would like to know if there's a way to 'force' display of drag & drop handle ?
(and keep drag & drop already implemented function on line)

you can see use case n°3 here:

https://codepen.io/GATIGA/pen/oNGRMRW

... I'm a little bit confused because Mavo is displaying different item-bar 's depending on elements...

Regards

[LeaVerou]

You mean to always show the handle even when the item is not hovered?

CSS to the rescue!

.mv-item-bar.mv-ui.mv-ui {
	opacity: 1;
}

(the doubled class is to increase specificity)

Note that it still won't show up when the app is not in edit mode. To force the app to always be in edit mode, you can use mv-mode="edit".

[GalinhaLX]

Thanks @LeaVerou for the reply, but it's not what I want to do

[GalinhaLX]

By the way, interesting case because I so guess that all existing interface is always there, and you just change 'opacity' to show it

In my case, I want to show, something which is not yet there :)

[DmitrySharabin]

It seems to me that the question might also be whether it’s possible to show drag handles inside collections of primitives (that are optional by default). I also wonder, is it possible? Or the only way to move primitives inside a collection is by dragging? 🤔

I haven't checked yet, but will it help if we add mv-item-bar="with move" to the collection item?

[GalinhaLX]

I tried

<ul mv-list mv-initial-items="1">
       <li mv-list-item="name3" mv-item-bar="with move"  mv-drag-handle>list li WITH handle  <strong style="color:red;"><- handle is present, but how to keep 'natural' drag & drop on text also?</strong>
       </li>
</ul>

doesn't work

am I using it right?

(tried to put it in different places, but still doesn't work...

https://codepen.io/GATIGA/pen/eYGwpya

[DmitrySharabin]

Lea meant adding class mv-drag-handle.

[GalinhaLX]

almost there:

class="mv-drag-handle" adds the grab hand on top of text (even on non- editing mode, which becomes strange for UI)

but it doesn't add the real function to drag & drop

..anything else to add? :)
updated :
https://codepen.io/GATIGA/pen/eYGwpya

[GalinhaLX]

oups , sorry , it adds it...but with a delay ....OK good

hourra

[GalinhaLX]

ok, I see, as I have a text inside innerHTML, I can not drag when there's text (
in codepen test) it's where I wrote "handle is present, but how to keep 'natural' drag & drop on text also"

the drag function starts...just after, outside it like inside a padding or margin: good to know