Hi,

I've been using JQuery/JQuery UI but I don't have much experience with either, I use JQuery mainly to make a few asynchronous  calls and JQuery UI for it's datepicker and tabs components.

I'm now experimenting with a small project where I'd like to create a simple game, I thought the draggable and droppable interactions could be useful but I'm having some trouble figuring out how to correctly apply them to my needs or even if they are useful at all.

My goal is to create a small GUI where the user will have, on a left panel, some images that he needs to drag over to specific areas on one panel to the right. If he drops the image on the target area, the image in the droppable must change to accommodate the new state, and a new draggable must be created in the starting point of the dragged image. Similar to dragging cards from one deck to the table, though the game is not a card game.

I can easily create the draggable but I don't know how to create a new draggable object in the starting position, nor am I able to change the image used on the droppable. I also can't understand how will I make the dragged object disappear from the page. Well, there is a lot I don't really know and I'm just testing the concept, still, any thoughts and docs you could offer are welcome.

I'm using the drop event of the droppable but the code I've created doesn't make any changes, e.g.:

$(this).children('img')[0].src = "blocksoldier.gif";  or $(this).children('img').attr("src", "blocksoldier.gif");