Ir ao conteúdo
  • Cadastre-se
SethC

Salvar posição de uma imagem draggable em jquery

Recommended Posts

Eu sou muito leigo em php e jquery, mas com um pouquinho de esforço e dedicação eu consegui dar meio passo pra uma coisa que venho querendo há anos.

 

Como já disse num outro tópico, tenho um fórum (ainda em localhost e venho trabalhando pesado nele). Em um determinado local, o usuário envia uma imagem (ok) e ela é exibida completamente em outra página (perfil). Ok. Eu setei uma div de determinada altura e largura e quando a imagem for muito grande em altura e não puder se acomodar na div, o usuário tenha a opção de reposicionar a imagem dentro daquela div.

 

Isso eu consegui fazer com o draggable do jquery, mas agora preciso saber como fazer pra salvar essa reposição que o usuário faz na página. Eu ouvi dizer que existem duas maneiras de fazer isso: pelo banco de dados e pelos cookies. Como sou muito leigo, acredito que a opção que mais vou entender é de cookies, mesmo que as alterações fiquem visíveis somente no navegador.

 

Olhem o código todo. Até agora só consegui o draggable pro usuário puxar a imagem pra cima, baixo, esquerda ou direito. Mas ao dar f5 a imagem retorna pro lugar inicial.

 

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
    $("#capa").draggable();
});
</script>
</head>
<body>
	<div class="conteudo">
		<img class="capa" id="capa" src="{IMG_UPLOAD}"></img>
	</div>
		<button id="salvar">Salvar Posição</button>
</body>
</html>
<style>
.conteudo {width:100%;height:300px;overflow:hidden}
img.capa {width:100%}
</style>

Eu espero que tenha ficado claro, tenho problemas em me expressar :(

Agradeço toda ajuda!

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lenon2016 Olá, sua dúvida foi bastante clara.

A solução é mais simples do que você imagina.

 

Tudo que você tem a fazer é resgatar a posição X e Y do elemento dentro do DIV e salvar estas posições no  banco de dados.

Lembra do plano cartesiano? é isso!

 

Tem diversas maneiras de fazer isso.. uma é utilizando o offset(posição do elemento)

Faz tempo que não mexo com o draggable 

Mas veja um exemplo simples: http://jsfiddle.net/UAgDA/461/

Mova para cima e para baixo e perceba o valor do eixo Y mudando. é só salvar ele no banco de dados!

Use esse exemplo para estudar e implementar um que mova tanto para os lados quanto para cima e para baixo.:thumbsup:

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
9 horas atrás, DiF disse:

@Lenon2016 Olá, sua dúvida foi bastante clara.

A solução é mais simples do que você imagina.

 

Tudo que você tem a fazer é resgatar a posição X e Y do elemento dentro do DIV e salvar estas posições no  banco de dados.

Lembra do plano cartesiano? é isso!

 

Tem diversas maneiras de fazer isso.. uma é utilizando o offset(posição do elemento)

Faz tempo que não mexo com o draggable 

Mas veja um exemplo simples: http://jsfiddle.net/UAgDA/461/

Mova para cima e para baixo e perceba o valor do eixo Y mudando. é só salvar ele no banco de dados!

Use esse exemplo para estudar e implementar um que mova tanto para os lados quanto para cima e para baixo.:thumbsup:

 

 

Oi DiF, muito obrigado pela resposta!

 

Então, eu olhei o exemplo e consegui entender, mas acho que no exemplo não tá incluso como enviar as posições pro banco de dados =(

é a parte em que tenho dificuldades, não entendo nada

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lenon2016 Sim, não tem como salvar pelo exemplo. O exemplo só serve para você saber como pegar a posição da imagem.

 

Para salvar, basta fazer uma requisição assíncrona(ajax) e enviar o valor da posição desejada. 

Por exemplo:

 

Vamos supor que você tem um botão "salvar" a imagem.

$(document).ready(function()
   var salvar = $("#btn_salvar");
   
   salvar.on("click", function(event){
          event.preventDefault();
          var offset = $("#imagem").offset();
          var yPos = offset.top;
  
         $.ajax({
              url:"salvarImg.php",
              dataType: "html",
              data: {posicaoY: yPos}
         }).done(function(retorno){
               alert(retorno) 
         }).fail(function(retorno){
               alert(retorno)
         });   
   });               
)};

No arquivo salvarImg.php ficaria assim:

$id = 5;
$posicaoY = $_POST["posicaoY"];

include 'conexao.php';

$salva = mysqli_query($conexao, "update usuario set posicaoY = $posicaoY where id_user = $id");

if($salva):
  echo "Foto ajustada";
else:
  echo "deu problema :(";
endif;

PS: o id ali é só representativo, onde o id deve ser trazido por sessão.

No update, você tem N opções.. tanto de update como insert into se for uma tabela diferente... 

 

 

Bom é só um exemplo simples. copia-lo não vai funcionar, porém se você estudar ele poderá implementar um que funcione no seu código!

Basicamente é isso... você salva a posição X e Y ou só X ou só Y... em variáveis e envia para um arquivo php os dados para inserir no banco de dados através da técnica ajax;

 

Como não podemos fazer o seu código por você, pelo menos podemos dar um norte.. é por aí

Compartilhar este post


Link para o post
Compartilhar em outros sites
3 minutos atrás, DiF disse:

@Lenon2016 Sim, não tem como salvar pelo exemplo. O exemplo só serve para você saber como pegar a posição da imagem.

 

Para salvar, basta fazer uma requisição assíncrona(ajax) e enviar o valor da posição desejada. 

Por exemplo:

 

Vamos supor que você tem um botão "salvar" a imagem.


$(document).ready(function()
   var salvar = $("#btn_salvar");
   
   salvar.on("click", function(event){
          event.preventDefault();
          var offset = $("#imagem").offset();
          var yPos = offset.top;
  
         $.ajax({
              url:"salvarImg.php",
              dataType: "html",
              data: {posicaoY: yPos}
         }).done(function(retorno){
               alert(retorno) 
         }).fail(function(retorno){
               alert(retorno)
         });   
   });               
)};

No arquivo salvarImg.php ficaria assim:


$id = 5;
$posicaoY = $_POST["posicaoY"];

include 'conexao.php';

$salva = mysqli_query($conexao, "update usuario set posicaoY = $posicaoY where id_user = $id");

if($salva):
  echo "Foto ajustada";
else:
  echo "deu problema :(";
endif;

PS: o id ali é só representativo, onde o id deve ser trazido por sessão.

No update, você tem N opções.. tanto de update como insert into se for uma tabela diferente... 

 

 

Bom é só um exemplo simples. copia-lo não vai funcionar, porém se você estudar ele poderá implementar um que funcione no seu código!

Basicamente é isso... você salva a posição X e Y ou só X ou só Y... em variáveis e envia para um arquivo php os dados para inserir no banco de dados através da técnica ajax;

 

Como não podemos fazer o seu código por você, pelo menos podemos dar um norte.. é por aí

Opa! Mais tarde vou dar uma estudada!

 

Aprender na marra, testando e alterando é melhor mesmo né kkkkk

 

Só mais uma coisa, eu notei ali no segundo código o "include 'conexao.php';"... eu terei de criar esse arquivo pra fazer a conexão e também criar as tabelas que serão armazenadas as posições?

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lenon2016

3 minutos atrás, Lenon2016 disse:

Só mais uma coisa, eu notei ali no segundo código o "include 'conexao.php';"... eu terei de criar esse arquivo pra fazer a conexão e também criar as tabelas que serão armazenadas as posições?

Sim! isso mesmo.

O arquivo conexao.php nada mais é do que a chamada da conexão com o banco de dados. atualmente usa-se o mysqli com i no final. 

 

a sintaxe é assim:

$conexao = mysqli_connect("localhost","usuario", "senha", "nome do banco de dados");

Sim! apenas uma linha.

 

Citação

também criar as tabelas que serão armazenadas as posições?

Depende.  Pode-se criar um campo direto na tabela de usuários onde guarda todas as informações dele.. como pode criar uma tabela específica para o avatar.

 

Por questões de normalização do banco de dados é indubitável a criação de uma tabela separada que se relaciona com a proporção 1:N

Por exemplo:


 

Tabela usuarios
ID (int) auto increment 
login(varchar)
senha(varchar)

Tabela avatar
ID (int) auto increment
ID_usuario(chave estrangeira relacionada com o campo ID da tabela usuário - chave primária)
nome_arquivo(varchar) recebe o nome do arquivo da imagem e a imagem propriamente dito é salva em um diretório no servidor
posicaoY (int)  valor da posição precisa ser do tipo inteiro

 

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
28 minutos atrás, DiF disse:

@Lenon2016

Sim! isso mesmo.

O arquivo conexao.php nada mais é do que a chamada da conexão com o banco de dados. atualmente usa-se o mysqli com i no final. 

 

a sintaxe é assim:


$conexao = mysqli_connect("localhost","usuario", "senha", "nome do banco de dados");

Sim! apenas uma linha.

 

Depende.  Pode-se criar um campo direto na tabela de usuários onde guarda todas as informações dele.. como pode criar uma tabela específica para o avatar.

 

Por questões de normalização do banco de dados é indubitável a criação de uma tabela separada que se relaciona com a proporção 1:N

Por exemplo:


 


Tabela usuarios
ID (int) auto increment 
login(varchar)
senha(varchar)

Tabela avatar
ID (int) auto increment
ID_usuario(chave estrangeira relacionada com o campo ID da tabela usuário - chave primária)
nome_arquivo(varchar) recebe o nome do arquivo da imagem e a imagem propriamente dito é salva em um diretório no servidor
posicaoY (int)  valor da posição precisa ser do tipo inteiro

 

 

Entendi :)

 

Nossa mais uma vez muito obrigadão pela ajuda. Mais tarde eu vou estudar todos os códigos e começar a fuçar, e volto dizendo se deu certo!

 

Abração!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×