Drag & Drop Reference Example

I’m trying to figure out how to properly do drag & drop with MonoGame. Seeing as there doesn’t seem to be any tutorials or example code out there that does what I’m trying to do I figured I’d roll my own example project. If you’ll can help me figure out how to properly implement this, then I’m happy to contribute whatever documentation/tutorial/example code to make this easier for the next person.

Here’s where I’m at so far:
https://hathor.tinytake.com/sf/NjMyMzIyXzMwOTY1NDk

I just want to be able to click and drag a card, and if I drag it to the slot in the middle of the screen have it snap there. Then if I drag it on top of another card if it’s one number lower than that card have it snap underneath it as a stack. I also want to set up proper z-indexing so the cards render in the right order, and when you drag a card around I want it to always be on top of whatever else while you’re dragging.

Extended has a MouseListener with a .MouseDrag event method; I’m not sure exactly how to implement that. It also apparently has some collusion detection, which I’m sure I need in order to determine if the card you’ve dragged is on top of another card or on top of the card slot image.

I created a new GitHub project to publish this code for the community. I’m happy to add you as a collaborator if you can help me get this code working, or if you can just point me in the right direction, I’d be most appreciative :slightly_smiling:

you have classes for each card i suppose right?

And these ideally have the rectangle information for the specific card (or the position at 0,0 and then maybe a size value) and some way to transform this information to screen space.

Sooo… what you can do is - if you check for mouse click “pressed” and your mouse is inside the rectangle of your card you “select” this card. (You iterate through all your cards and check which of them contain the mouse position. Then from this list of found cards you get the one with the highest z value).

In this step you have to save the position of the card when it was picked up, so you know where to put it when you let it go where it’s not supposed to.

Now, in your main update routine you have to have a reference to the currently selected card. Change the cards position to the mouse position for each frame.

If you “release” the mouse you again check what’s under your mouse position. ( Again - you iterate through all your card slots and check which of them contain the mouse position)

If you don’t find any slot, just set the position of the “selected” card to the position we saved initially when picking it up. Otherwise set it to the slot position.

I don’t know if that was any helpful, but it’s really hard to judge without knowing how you set up the code in the first place.

1 Like

it’s really hard to judge without knowing how you set up the code in the first place.

Well is there any way you can take a look at the code I wrote so far? It’s all on github.

https://github.com/SoundGoddess/MonoGameDragAndDrop/blob/master/MonoGameDragAndDrop/Item.cs

https://github.com/SoundGoddess/MonoGameDragAndDrop/blob/master/MonoGameDragAndDrop/DragAndDropMG.cs

Anyway @kosmonautgames what you said made sense, I’m just still a little fuzzy on what I’m doing exactly. I probably just need to sleep for awhile and look at it later since I’m a bit sleep-deprived atm. :open_mouth:

There was a XNA card game starter kit but unfortunately, Microsoft remove part of their website hosting this resource, and I found a 3rd party one (more comprehensive):

XNA starter kit

I can check on my files to get it back and upload it somewhere.

@SoundGoddess

I just want to be able to click and drag a card, and if I drag it to the slot in the middle of the screen have it snap there. Then if I drag it on top of another card if it’s one number lower than that card have it snap underneath it as a stack. I also want to set up proper z-indexing so the cards render in the right order, and when you drag a card around I want it to always be on top of whatever else while you’re dragging.

You’ll need a collection of cards to operate on. When the mouse switches state from non-clicked, to clicked, indicating a beginning of a mouse down, grab the mouse position. You’ll need to use that position from the screen space to find a card in your game’s world space. If a card is found it is considered a selected card and needs a way to render on top of the rest of cards. While the mouse is down you can use the mouse position to move the selected card freely. When the mouse is released you’ll need to check the mouse position too see if it’s a valid position to place the card. If it is, you should unselect the card and snap it to it’s proper resting place. If it’s not a valid position, unselect the card and snap it to it’s original position before it was selected.

1 Like

I got XNA starter kit running, surprisingly it worked out of the box with MonoGame. It detected my xbox controller and loaded up a menu and let me play around a bit with an animated platformer character animation. Unfortunately it has no drag and drop functionality.

I mean the other one: the card game starter kit (with a blackjack example).

oh ok, well I’m going to just fiddle with this xnaFan code and see if I can figure out how to get something working in a way that makes more logical sense to me. Thanks for your help :slight_smile: