Obtendo o jQuery arrastável para encaixar em uma grade específica

(NOTA: Alguns fizeram perguntas semelhantes, mas eram muito específicos e não deram respostas úteis)

O widget arrastável da interface do usuário do jQuery tem opções para encaixar em uma grade, mas não é possível definir com o que a grade é relativa.

Por exemplo, temos uma grade de 20x20 claramente definida em nosso destino de queda. Um item de arrasto que inicia em 0,0 no destino de soltura se encaixará na correspondência com a grade. Mas um item de arrastar que comece em um local diferente ou fora do destino de soltar não se alinhará com essa grade.

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"
    });
});

Existequalquer maneira de encaixar uma grade específica usando jQuery arrastável?