jQuery UI Draggable - Snap to element or grid
.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
.ui-widget-header p, .ui-widget-content p { margin: 0; }
#snaptarget { height: 140px; }
$(function() {
$("#draggable").draggable({ snap: true });
$("#draggable2").draggable({ snap: '.ui-widget-header' });
$("#draggable3").draggable({ snap: '.ui-widget-header', snapMode: 'outer' });
$("#draggable4").draggable({ grid: [20,20] });
$("#draggable5").draggable({ grid: [80, 80] });
});
I'm a snap target
Default (snap: true), snaps to all other draggable elements
I only snap to the big box
I only snap to the outer edges of the big box
I snap to a 20 x 20 grid
I snap to a 80 x 80 grid
Snap the draggable to the inner or outer boundaries of a DOM element. Use the snap, snapMode (inner, outer, both), and snapTolerance (distance in pixels the draggable must be from the element when snapping is invoked) options.
Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.