Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Simpsons

Drag and Drop

Por , em Javascript

Recommended Posts

Simpsons    0

Simpsons
Postado

:D Fala Terráqueos. Tranquilos ? :thumbsup:

 

Bom... Me indicaram esse fórum, e me falaram que os membros desse fórum, são muito ativos. Então resolvi postar minha dúvida aqui, vamos lá.

 

Eu comecei a pegar o conceito de Drag and Drop, e já consegui fazer umas coisas bacaninhas, utilizando DIV's, onde eu consigo arrastar essa DIV, por toda a tela, bom beleza...

 

Mas eu gostaria de implementar algo mais sucesso, tipo:

 

Enquanto eu vou arrastando meu Drag and Drop por toda a tela, o PHP vai pegando os eixos X e Y, e salvando de forma instântanea em meu Banco de Dados Mysql.

 

Agora eu gostaria de saber, se é possível fazer isso, de forma simples, e que o codigo fique light e simples ?

 

Tomará que vocês possam me ajudar, pois me interessei por esse conceito de Drag and Drop.

 

Valew.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Simpsons    0

Simpsons
Postado

Oi Terraquio William. Tudo Bem ?

 

Desculpe, mas com certeza seria JS. Se algum moderador puder transferir topico, agradeço

 

Valew Rapaz

Compartilhar este post

Link para o post
Compartilhar em outros sites

Simpsons    0

Simpsons
Postado

Pois é, não sou da terra não, pois sempre no mundo da lua rrssss

 

Então, eu vi o link do Jquery, mas oque eu eu preciso, é salvar a posição do Drag and Drop, enquanto eu o movimento. Tem como ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

rodrigopa    7

rodrigopa
Postado

Você pode pegar com a função css() os valores da direita e da esquerda e mandar para um arquivo PHP pelo ajax().

 

Ficaria mais ou menos assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drag</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#alvo').draggable({
	stop: function(e, ui) {
		var left = $(this).css('left').replace('px', '');
		var top = $(this).css('top').replace('px', '');

		$.ajax({
			url: 'arquivo.php',
			cache: false,
			data: 'left=' + left + '&top=' + top,
		});
	}
});
});
</script>
</head>

<body>

<div id="alvo" style="width:300px;height:250px;cursor:move;background:#ccc"></div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Simpsons    0

Simpsons
Postado

Oi Rodrigopa. Eu estava testando seu código, e me me veio na cabeça outra duvida.

 

Como eu pego o valor enviado para a pagina arquivo.php, que você usou como exemplo no código ?

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Simpsons    0

Simpsons
Postado

Olá Rodrigopa. Tudo Bem ?

 

Eu estou mexendo no seu código aqui, e eu fiz tudo como deveria ser. Mas eu movo a DIV, mas nem grava no banco, será que estou fazendo de errado ?

 

É que estou aprendendo javascript ainda, então esse código, se funcionar será de grande ajuda para meus estudos.

 

Agradeço se puderem me ajudar, a fazer isso funcionar.

 

Meu código ficou assim.

 

conexao.php

 

<?php
$sql = mysql_connect("servidor","usuario","senha");
$dados = mysql_select_db("banco",$sql);
?>

 

index.php

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drag</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
       $('#alvo').draggable({
               stop: function(e, ui) {
                       var left = $(this).css('left').replace('px', '');
                       var top = $(this).css('top').replace('px', '');

                       $.ajax({
                               url: 'arquivo.php',
                               cache: false,
                               data: 'left=' + left + '&top=' + top,
                       });
               }
       });
});
</script>
</head>

<body>

       <div id="alvo" style="width:300px;height:250px;cursor:move;background:#ccc"></div>

</body>
</html>

 

arquivo.php

<?php

include("conexao.php");

$left = $_GET['left'];
$top = $_GET['top'];

$query = mysql_query("INSERT INTO draganddrop (left,top) values ('$left','$top')");

?>

 

Mais uma vez, muito obrigado pela ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rodrigopa    7

rodrigopa
Postado

O erro estava no MySQL, estranhamente quando o nome dos campos são left e top dá um bug, apenas mudei os nomes para x e y e funcionou perfeitamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jonatã Cioni    9

Jonatã Cioni
Postado

O erro estava no MySQL, estranhamente quando o nome dos campos são left e top dá um bug, apenas mudei os nomes para x e y e funcionou perfeitamente.

 

eh pq essas duas palavras são palavras chave do MySql... você não pode usar palavras chave como nome de banco, tabela ou coluna....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Simpsons    0

Simpsons
Postado

Que legal, dessa eu não sabia. Vou testar aqui.

 

Só mais uma dúvida, esse código é JavaScript né, ou jacaré ?

 

Mais uma vez, obrigado a todos.

 

Por isso que a imasters é a mais famosa de todas, Valew.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito