Resizable: Ghosting doesn't adheer to the Grid

[seth.aldridge]

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

[seth.aldridge]

I also found this to be true with the alsoResize and helper properties.

Thanks, Seth

[nop]

There is a quick fix: "grid" plugin should be the first one in ui.resizable.js (near the line 528)

/*

• Resizable Extensions */

$.ui.plugin.add("resizable", "grid", .....

Then all other plugins will have size with respect to grid.

[prestonparris]

I have come up with a solution for this, I submitted a pull request on git hub. ​https://github.com/prestonparris/jquery-ui/commit/0438e80e5f865981f01fbf0f0dbad8db44957f47

[tj.vantoll]

Still an issue in 1.9 ​http://jsfiddle.net/tj_vantoll/kB26B/. The pull request referenced above now 404s.