jQuery drag&drop item automatically go to placeholder

Question

I got the following structure:

The problem:

The draggable items should be dropped at the placeholder. Every draggable item has a class (red, blue, green, etc) and only the placeholder with the same color accepts it. My question is how I can make when a draggable item is dropped in the yellow box it should automatically go in its placeholder: e.g. u put the red item in the yellow box and the placeholder should accept it. Currently to make placeholder accept the item you should drag the item exactly over the placeholder.

My researches:

I've checked pretty much everything in the http://jqueryui.com/draggable/ and http://jqueryui.com/droppable/, couldn't find similar examples.

Code: My code is just a simple

element.droppable({
    accept: "[cat='" + attrs.droppable + "']",
    activeClass: "ui-state-default",
    drop: function(event, ui) {
            //on drop code
    }
});

together with

element.draggable({
    revert: "invalid",
    start: function(event, ui) {
        //code

    },
    stop: function(event, ui) {
        //etc
    }
})

Am I missing something in the documentation?

I would really appreciate any help :)

Answer 1

You could try this. Only make the yellow box droppable, and then reposition the dragged item to the appropriate placeholder box inside.

$("#yellowBox").droppable({
    activeClass: "ui-state-default",
    drop: handleDrop
});

function handleDrop( event, ui ) {

  // Get the color of the dragged element
  var draggedColor = ui.draggable.attr ('class');

   ui.draggable.addClass( 'correct' );
   ui.draggable.draggable( 'disable' );

    // Reposition to the placeholder box with the same color
   ui.draggable.position( { of: $(this,'.'+draggedColor), my: 'left top', at: 'left top' } );
   ui.draggable.draggable( 'option', 'revert', false );
}