I am battling a long time with this issue and that i hope someone will easily notice me if you can do things i are thinking about. And perhaps most significant.. how, because I have no idea.

What exactly I wish to achieve is a specific item here: http://d.pr/h4N5. (sorry I can not publish images yet, because I am new here) Among the colored boxes ought to be pulled into among the gray ones. That's what lengths I acquired for the time being, coding it.

But I have to be aware of values from the gray box where it's dropped on and which from the colored boxes is dropped onto it. Next I'll place the values inside a database.

For instance: Basically drop the pink box around the gray box using the number 5. I want the values: 5 and p.

We do hope you understand my problem.

I'm wondering as wel if you can drop a couple of the coloured boxes on a single and also the same gray box.

Lots of questions but I am hoping someone might help me! Thanks ahead of time!

Do that in your droppables' drop event:

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

Within the drop event, $(this) refers back to the jQuery object which something was dropped, and ui.draggable always provides you with the jQuery object that's been dropped.

Browse the jQuery UI API documentation:



You'll be able to use something similar to the next should you provide the gray boxes class grey and also the color boxes class color, passing their contents as data to some PHP handler utilizing an AJAX request:

    revert: true

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

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

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

Here's a good example of the UI: http://jsfiddle.net/G2rZV/