Drag HTML element to three.js world

Hi there. I’m working in a game where ideally you can drag the soldier to the board.

The UX is overlapped with HTML+CSS. The problem is that I can’t combine the events of the HTML elements with the events of the canvas. The reason is that when the mousedown is fired from the UX it never fires from the canvas.

Any ideas on what is the best approach to achieve this? Shall I avoid html+css and use some sort of HUD in three.js?