Resizable: Ghosting doesn't adheer to the Grid

I have setup a simple div that moves on the X axis using resize(). The issue I've found is when I use:

ghost: true,

grid: [50, 0]

The ghost property allows the element to slide in between the grid areas which will make elements not align to the grid.

$(this).resizable({

handles: 'e',

ghost:true,

grid:[15,0],

resize: function() {

$('.tasks li').unbind('mouseenter', highlight);

},

stop: function() {

$('.tasks li')

.bind('mouseenter', highlight)

.bind('mouseleave', hide_highlight);

}

});

Thanks,

Seth