DOM drag and drop

Phaser 3
1

Im going to use phaser HTML functions for game ui and i wonder can i use phaser mouse events for drag and drop on html or i need to create my functions for that?

2

After spending almost all day trying to figure this out, phaser cant use drag and drop events on html.

I tried to add my event listener but then i need to calculate the matrix scale so i can position item on mouse position.

But even this didnt work because for some reason each time when you hover on some dom element while dragging event is stopping.
I added pointer events all and auto but that also cant help.

I made inventory grid using phaser canvas and thats works perfectly but i wanted to recreate the same thing but in html using phaser but it seems this is not possible with phaser.

Only solution i cant think of to create UI like this to be separated from phaser framework and connect with framework on events but thats to much work for such a simple thing like drag and drop inventory.

image

3

I’m not sure I understand the problem.

This extremely basic example drags and drops a domElement. Could you elaborate how this differs from what you want?

1 Like
4

Your solution for using html functionality works perfectly but the reason why i wanted to make my own was is that i dont want this cursor icon and i cant change it or hide with css.
image

I made drag and drop many times from html to canvas, unity and i wanted to add that here but the problem that i face was incorrect mouse position and div position while draging.

I used onmousedown, onmouseup, onmousemove event listener and position is incorrect. But that is normal because phaser is using scale manager to scale whole html content and thats okay. Also i faced that phaser is adding pointer events none on some html elements. Problem at the end was that no matter what i do, something is missing and mouse position and element drag position is not correct, especially on windows scaling.

Thank you for helping but i decided to use drag and drop on object draw on canvas with phaser, its easier, so this topic can be closed.

Your solution is also okay but only if i found a way to remove pointer icon on drag. (i dont want people to see and know that is html drag function)
Thanks.

5

Changed it to fake drag.

This more like it?

1 Like
6

Thank you this is what i wanted, its basically the same as i did but i have problem as i described. I will try your example and see if is working and compare, maybe im missing something because of lot of ui that i have.

Thank you again very much.

7

If you add this

	scale: {
		mode: Phaser.Scale.FIT,
		autoCenter: Phaser.Scale.CENTER_BOTH
	}

You will see problem that i have.

8

I will look at this tomorrow. Have to find the scaling factor and offsets :slight_smile:

9

Its okay, you already did a great work and help me many times already!!!

10

Fixed. When there are multiple ‘draggables’, you may need to re-order the dom to fix z-index problems. The draggable must be added to the Dom last, since you can’t actually set z-index (due to the parent).

1 Like
11

I cant describe how much i appreciate your help. thank you!