Offset Droppable using Jquery

Question

My droppable area seems to be offset by the width of the draggable item. This means when I try to add a draggable to a droppable, it becomes active when it's not actually on top of the item (in my image, the Add New Step is my draggable div, and New Step is the droppable). How can I set an offset to the droppable object to account for the width of the draggable?

This is what I've tried (which doesn't work):

 $('.newStep').draggable();
 $('.newStep').draggable('enable');

  $('.stepNode').not('.newStep').droppable({
       create: function(event, ui){
       var off = $(this).offset();
       console.log("off.left: " + off.left);
       off.left += ui.draggable.width()/2;
       ui.draggable.offset(off);
     },
     disabled: false
   });

jsfiddle:

http://jsfiddle.net/jdxA8/1/

Answer 1

Try like this:

$( ".drag" ).draggable();
$( ".drop" ).droppable({
  drop: function( event, ui ) {
    var off = $( this ).offset();
    off.top += 5;
    off.left += 5;
    ui.draggable.offset( off );
  }
});

http://jsbin.com/iqunod/1/edit