Question

Does anyone know, I have a draggable item that is supposed to snap to the droppable item. I have that working, but what I can’t seem to figure out is, I would like the draggable object, once dropped onto the droppable object, to align itself so that it is just off the left hand side. Like the image below.

Does anyone know a way to do this with jQuerys draggable/droppable objects?

UPDATE

Here is the function I have for when the object is dropped.

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again
  //alert("Slot number: "+slotNumber+"\n Card Number: "+cardNumber);

  //alert(cardNumber+":"+slotNumber);
  if(cardNumber==slotNumber)
  {
      correctCards++;
  }

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

    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );

    ui.draggable.css({'cursor':'default'});
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
}

Answer 1

I figured out a way to achieve this. I was using the position() function when what I really needed was the offset() function. This a snippet of the code I used for the positioning. The draggable object is a little bit smaller height, so for the top I calculate the different in size and then divide it by 2 to center it within the object. Then I just set it to half the draggable being off of the droppable object.

    var off = $( this ).offset();
    off.top += (($( this ).height() - ui.draggable.height())/2);
    off.left -= ui.draggable.width()/2;

    ui.draggable.offset( off );