Drag & drop: customize target with CSS

[GalinhaLX]

Hi

When dragging an item from a list, I'm able to

• customize initial state (when item is clicked)
• during drag

but, I would like to customize the target of the drop, before I drop it there

Currently, we can see some grey text under the dragged element

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

Does anybody have an idea on how I can customize it?

(I've been trying almost all selectors I could find https://www.w3schools.com/cssref/css_selectors.asp

Regards

[GalinhaLX]

Also have a strange behavior:
while dragging item, the height of the "box" is bigger, even if I set all sizes, any idea why this happens?

[DmitrySharabin]

Since Mavo uses Dragula under the hood, I would suggest you take a look at the classes it exposes. That might help.

Here are the styles Mavo supports out-of-box (that you can override, of course 😄):

mavo/src-css/mavo.scss

Lines 148 to 175 in 4b719ae

	[mv-list-item] {
	position: relative;
	&.mv-highlight { // basically &:has(> .mv-item-bar:hover)
	@include highlight(hsla(80, 50%, 50%, .25), "!important");
	}
	// Dragula styles
	&.gu-mirror {
	position: fixed !important;
	margin: 0 !important;
	z-index: 9999 !important;
	opacity: 0.8;
	}
	&.gu-transit {
	opacity: 0.2;
	}
	}
	.gu-hide {
	display: none !important;
	}
	.gu-unselectable {
	user-select: none !important;
	}

[GalinhaLX]

Thank you @DmitrySharabin !

I don't know why... I was looking at draggable.js :(