title: jQuery draggable, offset to the left
body: <p>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. </p>
  
  <p>Does anyone know a way to do this with jQuerys draggable/droppable objects?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here is the function I have for when the object is dropped.</p>
  
  <pre><code>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 );
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/4xFnR.png" alt="enter image description here"></p>