Drag and Drop Inventory Items

Hello, Im looking for some help setting up a system where i can drag inventory items into different positions in the bag on to a slot like a head or arms or whatever. Right now the inventory is set up, the items are set up completely with stats, even the drag item around is set up, however the drop item function isnt working because i dont know how to set it up. I set up my inventory based off of this video series - YouTube.

Ive looked up alot of things about how to set up the drag and drop system but none of them really work with the inventory set up that the video explains.

Im hoping some one can point me in the right direction. let me know what pictures will help out theres a lot i could show. any help is much appreciated.

It would be helpful if you post an image of you current on drop function and if you tell what exactly isnt working. But basically what the on drop function does (or should do) is that its called on the widget a player drops an item on and you have to decide (based on the drag’ndrop operation) if the drop is successful or not(the bool that you return). If it was successful you ofc do have to spawn the new item in the slot by create widget, child it to the slot and possibly destroy the old item widget. Thats the way my inventory system handles it.

Here are the “Drag and Drop” blueprints located in the inventory button widget

And here is the “Drop” blue prints located in the Health Bar Widget which im sure is wrong.

Well if you add “null” as content to the Inventory Menu there wont appear anything… You need to add to the drop function a create widget node and create in your case i think an inventory button and connect the output to the content pin. Another way would be to reparent the “payload” from the operation.

Thanks for the response! I did what you said and now when i click and drag Then drop it adds a new “Inventory Slot” Button to the inventory panel at the very bottom so im getting closer. some how i need it to get the information in the item that im dragging and transfer it to a different inventory slot. Ill attach so images of whats happening.

Your payload is the widget button you dragged so if you cast (in the on drop function) the payload to widget button you can acess all information from it.

Where do i pull that information from. I already have the Payload set to the inventory item (self) but that could be wrong. all the information is stored in an inventory structure but the payload is an actor. Im not sure exactly what your saying here. I have the payload reference i think. not sure where to connect it.

Does the inventory item cointains that structure? if not I would modify the dnd operation to contain this structure in this case you obviously have to set this in the on drag detected function.

I did the cast to the “Inventory Slot” in the Drop Function and removed and added to parent so now when i drop it removes the item from the original location and adds it to the bottom of the “Inventory Panel” grid that i have, but it also removes the original inventory button. But the good part is that the Item info from the structure goes with it. So that means that its still getting the structure information so again im a step closer. I appreciate your time and patience with me. All that needs to happen now is for the item to not go straight to the bottom but go to the inventory spot that i dropped it over and for the original slot to stay there.

Here is what i changed in the drop

Inventory before drag and drop.

Inventory after drag and drop. The item i dragged was added to the bottom and stretched to the panels width, and the original slot was removed.

Well what i maybe forgot to say is that your payload should be the item-widget NOT the item AND the slot.

So what youre saying is that i need to rework this so that i have a widget for the item and a separate widget for the slot? Right now the “item” is an actor thats you pick up off the ground.

Yes thats correct. Its much better to have a seperate widget for the item.

Ok so if you wouldnt mind giving me a little more help thatd be awesome. so right now when i click an item on the ground it adds its Item info from the inventory structure to the “Inventory Array” which then runs an event called “Refresh inventory”. In “Refresh Inventory” It runs a “ForEachLoop” with an Array of all of the “Inventory slots” then breaks the inventory structure based on the array index of the loop. Truth be told i dont know what the hell is going on in here. Im really not sure how this tells the item i pick up where to go. so if i were to kind of reorganize this with another widget that represented the Itme i picked up im not sure at all how to make that work.

My thought process is that i would pick it up and it would parent its self to Inventory slot 1 then the next item i pick up would bind to inventory slot 2 and so on then when i Click and Drag it would unparent it then reparent it to the what ever inventory slot i was mousing over. but im really not sure how to set that up, especially the beginning part.

Ok if every Item is at the right position in the inevntory array its fairly simple… In the loop you posted add a create widget node that creates you WidgetItem (I would suggest just a widget with an image in it in size of your slots that widget blueprint should have a var of type InventoryStructure) after that you set the structure in the widget and add it as a child to the slot. I made an image

Ok so minor problem that i cant figure out i am able to add the Item Widget to the Old Inventory Slot as a child and have it display proper image however its stretching it and cutting it off at the same time and i really cant for the life of me figure out what the problem is. it seems as though it has to do with the Item Widget but all of the dimensions of the widget are square, actually all of the dimensions of the slot are square to so im not sure why its doing this.

the next issue might be a tad more serious (or maybe not because i dont really understand how this part works) it has to do with calling the information again after ive moved it, but im not there yet. how do i tell it what slot to parent to once i get the drop function working? could i set it to a variable when i mouse over then clear the variable when i leave it? im not to sure.

Ok got this all working again with the new set up. not sure how to call what Inventory slot that im going to parent to on drop. tried an assortment of things only parenting to a variable of the array element got me close but it only parented to the bottom right Slot. also the Item isnt removing its self from the parent like it should.

Is the drop located in the UI blueprints or in the item blueprints? Right now its not removing from parent and its also not adding child. and ive done it in both blueprints

The drop function you use is the one of the slot so the problem of which parent you use is easy fixed with that the payload is that item widget you started dragging and if a drop succeeds you just cast the payload to a widget and remove it

Awesome that works! another step closer! still just a few more problems.

  1. The “Remove from Parent” node doesn’t work. Its stays there and essentially copies the item how ever it doesnt call the information in the inventory structure, but that could be something i can figure out.
  2. The new parented widget cant be dragged and dropped again.
  3. they are still scaled weird

I hope I didnt lose you. very close to this thing working. just need a few more bits of help and this is done :slight_smile: