0

Bom dia, o que estou querendo fazer é, um sistema onde o usuário faça o upload de uma imagem e tenha uma pré-visualização de como ficará a imagem posicionada na div, podendo movê-la pra a posição que achar melhor.

É basicamente a mesma coisa que a atualização da capa do Facebook, onde você faz upload de uma imagem e posiciona, através de drag and drop, da maneira que você quer!

Gostaria de saber se tem algum plugin jQuery para isso, ou se há alguma forma de fazer sem plugin, enfim, ideias? :)

Update:

O máximo que consegui, mas não obtive o resultado que queria, foi utilizando o plugin JCrop para fazer algo parecido com o exemplo de preview, mas como falei, não é bem isso que procuro, e sim o posicionamento direto na div, sem precisar de corte.

0

1 Resposta 1

1

Encontrei este plugin em jQuery, bem leve e fácil de usar (necessita do jQuery UI por causa do drag).

Pode inicializar ele assim:

$('#img').imagedrag({
    input: "#position" // output da position
    position: "middle" // posição inicial
});

Ele salva a position vertical da imagem quando é arrastada no parâmetro input do plugin.

Não sei o que tu pretende fazer depois, mas já vou deixar uma dica:
cria um <input type="hidden" id="position"> para salvar o valor e depois tu pode salvá-lo num BD ou outro lugar para ajustar a posição quando o usuário voltar para aquela página, utilizando background-position do CSS ou o próprio parâmetro position do plugin.

1
  • Obrigado! Exatamente o que eu precisava. Commented 30/01/2015 às 17:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .