Draggable:grid - Snapping Draggable on Start
I have a page with any number of draggable elements positioned freely
or snapped to a grid which is controlled by the person visiting the
site. For elements that are positioned freely (not snapped to the
grid) I need to snap them to the grid on the draggable start callback.
However, at that time the person dragging has complete control of the
draggable and it won't accept a new top and left style to snap it to
the specified grid. Obviously it still snaps to a grid relative to
where it started, but that is not necessarily "attached" to the grid
that is visible on the page, which looks pretty silly.
I can bind a mousedown event to the draggable and snap it at that
time, but visitors are not necessarily going to drag the element every
time they mousedown on it, so the snap is unexpected and usually
unwanted.
Here is the code I am using on start to try to force the draggable to
a grid axis:
start: function(event, ui) {
var ttop = parseInt(ui.helper.css('top'));
var left = parseInt(ui.helper.css('left'));
ui.helper.css({
top: (ttop - (ttop % global.gridScale))+'px',
left: (left - (left % global.gridScale))+'px',
border: 'solid 1px #f00'
});
}
I threw border in there just to be sure that ui.helper.css was doing
anything. The new top and left values are calculated correctly. Anyone
know how I can force this?