jQuery UI arrastável, ajustando a uma grade

Tenho dois contêineres. Um contêiner de miniaturas e um contêiner de "página". Ambos são divs. As miniaturas podem ser arrastadas para frente e para trás entre os dois contêineres. Como reverti as miniaturas definidas como 'inválidas', elas retornam a um dos dois contêineres se forem deixadas fora de um dele

As miniaturas devem se encaixar em uma grade de 20x20 dentro do contêiner "página". Isso é para que o cliente possa colocar as miniaturas no contêiner de "página" em qualquer lugar, mas ainda assim poder alinhar as miniatura

O problema é que a opção 'grade' arrastável não parece funcionar muito bem para isso. Parece que a "grade" é determinada pelo local das barras arrastáveis quando você a arrasta, em vez de agir como se a página tivesse uma grade real na qual pudesse ser encaixada.

Existe uma maneira de corrigir isso para que a grade se baseie no contêiner "página", em vez da posição do arrastável quando você começar a arrastá-l

questionAnswers(2)

yourAnswerToTheQuestion