(NOTA: Algunos han hecho preguntas similares, pero fueron demasiado específicas y no dieron respuestas útiles)

El widget que se puede arrastrar de jQuery UI tiene opciones para ajustarse a una cuadrícula, pero no hay manera de establecer a qué se relaciona la cuadrícula.

Por ejemplo, tenemos una cuadrícula de 20x20 claramente definida en nuestro objetivo de caída. Un elemento de arrastre que comienza en 0,0 dentro del objetivo de caída se ajustará en correspondencia con la cuadrícula. Pero un elemento de arrastre que comienza en una ubicación diferente, o fuera del objetivo de colocación, no se alineará con esa cuadrícula.

http://jsfiddle.net/FNhFX/5/

HTML:

<div class="drop-target">
    <div class="drag-item">Drag me</div>
    <div class="drag-item" style="left:87px;top:87px;">Drag me</div>
</div>
<div class="outside-drag-item">Drag me</div>

JS:

$(function() {
    $(".drag-item").draggable({
        grid: [20, 20]
    });
    $(".outside-drag-item").draggable({
        grid: [20, 20],
        helper:"clone"
    });
    $(".drop-target").droppable({
        accept: ".drag-item"
    });
});

Esta ahíalguna ¿Cómo ajustar a una cuadrícula específica usando jQuery arrastrable?