Question

Simple Version of my question:
Is it possible to take a JQuery UI draggable image’s ID, when it’s dropped into my goal droppable, and use the ID as a value and update a field in one of my MySQL database tables when the draggable image is dropped?

Technical Version of my question:
I used a tutorial from a website to make a drag and drop inventory feature for a game I am currently working on.

Anyways, I cannot give a direct link to my site, as it requires a login, and I haven’t gotten my system to work beyond my IP address, but here is what I am basically trying to do:

My drag and drop works great, but I need it to update a MySQL Database, I know for the tutorial I have linked, it has a second part that does it, but not the way I need.

So my user’s inventory has it’s own table with the following fields:

bid: this is the user id stored as a 32 digit unique random number
itemid: this is an 8 digit item code

All the information for the user and the objects are Inner Joined to combine the information into PHP Variables, I split these up over different tables because I have multiple sites that adjust each one. So far everything works here.

I use mysql_fetch_array() to load the items into the inventory box to make them draggable.

My items are formatted as so:

img src='$cheesepic' id='$itemid' class='object cheese'
$cheesepic == "http://motb.isgreat.org/objects/" . $itemid . ".png";

and $item id is stolen directly from the inventory table. The CSS classes object scales the image to my desired size, I like it better than thumbnails since it caches better because I use so many different sizes of the objects around the site. The cheese class is for dragging so it is only accepted by the cheese droppable.

Now I have another table in my database for the equipped objects. So the fields there are bid and cheese. I would like to be able to update my database with the ID of the image that was dragged into the droppable. And delete that row if they drag it out of the droppable and into the inventory droppable again.

Thanks for your help.

Answer 1

The jQuery Drag & Drop API let’s you get the data of the item being dragged, here’s an example of what you might be trying to do (data names and table row names are just random estimates):

$(".inventory").droppable({
    drop: function(e, ui) {
        // This gets the ID of the item you are dragging
        var item_id = $(ui.draggable).attr('id');

        // Ajax call example...
        $.ajax({
            type: "GET",
            timeout: 10000,
            url: "http://example.com/item_update.php?item_id="+item_id,
        });
    }
});

The PHP/MySQL side of it is a bit harder to help you out with, seeing as most game scripts are really specific but you could do something along the lines of:

$item_id = preg_replace( '/[^0-9]/', '', $_GET['id']);
mysql_query("UPDATE user_items SET equipped = 0 WHERE item_id = ".$item_id);