How to get values from multiple jQuery drag and drop

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 ac开发者_开发技巧hieve 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!

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/

Do this on your droppables' drop event:

$('.drop').droppable({
   drop: function(event, ui){
      var dropValue = $(this).text();
      var dragValue = ui.draggable.text();
   }
});

Inside the drop event, $(this) refers to the jQuery object on which something was dropped, and ui.draggable always gives you the jQuery object that has been dropped.