Question

I’m struggling quite a while now with this problem and I hope someone can tell me if it’s possible to do what I have in mind. And maybe most important.. how, because I have no clue.

So what I want to achieve is what you see here: http://d.pr/h4N5. (sorry I can’t post images yet, because I’m new here) One of the colored boxes should be dragged into one of the grey ones. That’s how far I got for now, coding it.

But I need to know the values of the grey box where it’s dropped on and which of the colored boxes is dropped on it. After that I’ll put the values in a database.

For example: If I drop the pink box on the grey box with the number 5. I need the values: 5 and p.

Hope you understand my problem.

I was wondering as wel if it’s possible to drop two of the colored boxes on one and the same grey box.

A lot of questions but I really hope someone can help me! Thanks in advance!

Answer 1

Check out the jQuery UI API documentation:

http://jqueryui.com/demos/draggable/

http://jqueryui.com/demos/droppable/

Then you can use something like the following if you give the grey boxes class grey and the color boxes class color, passing their contents as data to a PHP handler using an AJAX request:

$('.color').draggable({
    revert: true
});

$('.grey').droppable({
    drop: function(event, ui) {
        var $drag = $(ui.draggable),
            $drop = $(this),
            data = {};

        data.drag = $drag.text();
        data.drop = $drop.text();

        $.ajax({
            url: "droppedToDatabase.php",
            type: "POST",
            data: data,
            success: function(response){
                // do whatever
            }
        }
    },
    tolerance: 'touch'
});

Here’s an example of the UI: http://jsfiddle.net/G2rZV/