Question

Is there a way to use both jquery visual feedback ghost with the snap to grid functionality? If I try to add both the ghost seems to override the grid functionality. thanks

Answer 1

So I submitted a fix to the jquery ui for this issue, it hasn’t been accepted yet, supposedly its an incomplete solution. If you have any suggestions for a refactor of this that would be greatly appreciated. But if you run into the same issue, the fix for me was to add the grid logic again in the _mouseStop function in ui.resizable. just add this code underneath line 322 in ui.resizable.js

if(this.options.grid && this.options.ghost){
   var o = self.options, cs = self.size, os = self.originalSize, op = self.originalPosition, a = self.axis, ratio = o._aspectRatio || event.shiftKey;
   o.grid = typeof o.grid == "number" ? [o.grid, o.grid] : o.grid;
   var ox = Math.round((cs.width - os.width) / (o.grid[0]||1)) * (o.grid[0]||1), oy = Math.round((cs.height - os.height) / (o.grid[1]||1)) * (o.grid[1]||1);

if (/^(se|s|e)$/.test(a)) {
   self.size.width = os.width + ox;
   self.size.height = os.height + oy;
}
else if (/^(ne)$/.test(a)) {
   self.size.width = os.width + ox;
   self.size.height = os.height + oy;
   self.position.top = op.top - oy;
}
else if (/^(sw)$/.test(a)) {
   self.size.width = os.width + ox;
   self.size.height = os.height + oy;
   self.position.left = op.left - ox;
}
else {
   self.size.width = os.width + ox;
   self.size.height = os.height + oy;
   self.position.top = op.top - oy;
   self.position.left = op.left - ox;
}
}