Salvar posição de uma imagem draggable em jquery

SethC · 18 de novembro de 2016

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!

DiF · 18 de novembro de 2016

@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.

SethC · 18 de novembro de 2016

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.

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

DiF · 18 de novembro de 2016

@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í

SethC · 18 de novembro de 2016

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?

DiF · 18 de novembro de 2016

@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

SethC · 18 de novembro de 2016

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