Div "puxar" outras div's como um imã

[BinSilva 0]

Prezados,

Olha o lance que preciso fazer, se alguém já viu algo parecido, agradeço.
http://sgrtemplate.com.br/teste/
Tenho um objeto (simulado pelo quadro preto) que quando for arrastado para próximo do quadro azul, a uma determinada distância, o quadro azul "puxa" o quadro preto para o centro, como se fosse um imã. Alguém já viu algo parecido com javascript ou jQuery?

 

[lucaswxp 22]

Nunca vi um biblioteca assim em jQuery, mas você já tem 50% feito com o draggable do jQuery.

 

Agora é questão de observar a posição atual do quado preto (tem um evento pra isso), e quando ele chegar perto o suficiente do quadro azul, você manualmente seta/anima a posição para dentro do destino.

 

O que você pode precisar e:

 

• O jQuery emite um evento "drag" ao arrastar um elemento. Do evento você pode saber a posição atual do elemento sendo arrastado.
• As funções .offset() e .position() do jQuery te ajudaram a determinar a posição correta.
• Não sei a maneira correta de fazer o elemento parar de ser arrastado, mas provavelmente se você remover o event listener do draggable vai dar certo.
• Quando chegar perto o suficiente do quadro azul, faz o que eu disse no item acima (remova o event listener) e assuma as rédeas para traduzir a posição pra dentro do outro elemento.

[BinSilva 0]

Segui um pouco a sua lógica, mas ignorei a div do objeto foco (no caso a div que centraliza).
Setei a posição do topo e margem esquerda do hover com javascript. Ai removo o event quando chega na posição e deu tudo certo =D

 

Vlw a dica hehehehe