Override HTML native drag and drop ghosting effect

user_13816853 0
Viewed 95

I have made a a feature using the native HTML drag and drop API in Vue 3. However, I would like to override the opacity that gets added when dragging. I have tried adding to the style like this in my ondragstart event

event.currentTarget.style.opacity = 1;

but it seems like that style can't be overridden. I have seen a lot of people on various forums complain about how its hard/not possible to change this "ghosting" effect. But if anyone has a solution, please let me know :)

vuejs3 css html
2 Answers

I think the solution to this problem can be much easier than you think. Adding attribute !important to your style will overwrite everything :)

event.currentTarget.style.opacity = "1 !important";

Let me now if this works :)

user_139770260

This done by replacing the default drag behaviour. You setup your own drag experience and then you can control how the browser handles the default behaviour.

Usually, the drag is turned off and a clone is of the node is moved.

user_1975460
Related