Inventory - drag and drop, how to?

Hello, is there anyone who has developed a drag and drop system? click on item and move it to a specified location. If not has anyone any idea how to do that? Tnx a lot.

1 Like

Could you be a bit more specific.
You want to move entities in scene in your game?

It is a bit of math and picking related. You need to learn certain things here:

  1. Analytical Ray to Plane picking
  2. pc.Picker which is second example here: http://developer.playcanvas.com/en/tutorials/intermediate/entity-picking/
  3. And some maths :slight_smile:

Or you are talking about like inventory.

Could you be please a bit more specific. Asking questions in clear - helps a lot to answering them clearly too. Saves time for everyone.

you are right, i mean like the inventory in games like diablo

Can be done fully as UI thing, using DOM in JS instead of 3d.
If you want to do it in 3d, you still can, urls from above will be useful.
This is more generic “how-to” rather any specific problem related question. Looks like you will have to go slow and learn how to do it. If you get any specific technical problem along the way, then feel free to ask.

Using DOM? do u have any reference where i can learn that?

DOM - is generally html + css. Creating elements in JS, positioning them and reacting on mouse events - is pretty much what you need. Editor is built on top of those technologies from ground up.
Here is example that can get you started: https://playcanvas.com/project/354600/overview/htmlcss--live-updates

1 Like

Tnx a lot Max will study it :smiley:

1 Like

Hi @ayrin,
I happen to be building a similar inventory drag drop feature. If your project is public, do you mind sharing a sample that I can base my work on ?

Hi @Vishnu_Krishnaprasad, i don’t mind but i still have to work on the drag and drop, anyway this is my project https://playcanvas.com/project/352037/overview/kallen-supremacy

thanks @ayrin, looks pretty neat. Nice job.

1 Like

Out of interest, are you going to use old html UI solution either native one?

I will use raphael.js it make it easier to make the mask (or seems easier to me coz i’m used to that) and it support drag and drop (but i still have to study that, i haven’t found a suitable example yet)

@mikefinch In my case the inventory is a furniture catalog. It’ll need to have a search bar and price filter, etc (just like an amazon.com search bar) where customers can filter furniture. So I plan to use html UI solution. I think that’s the easier option of the two if the UI needs such complex elements.

Yea, pretty agree with you then.