Ir para conteúdo

POWERED BY:

Arquivado

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

FellipeVale

Como mover tag HTML com PHP

Por , em Javascript

Recommended Posts

FellipeVale    0

FellipeVale
Postado

Olá pessoal,

 

Estou com uma duvida que já esta esta me matando a semanas, não consigo encontrar nada sobre isso no google ou encontrei e não consegui identificar o conteudo.

 

Vamos lá...

 

Alguem sabe como mover tags HTML com PHP?

 

Post o script básico só pra eu poder ter uma noção de como se começa a desenvolver o script.

 

Desde já agradeço...

 

 

att,

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Então, agora que o tópico está no lugar certo, pesquise sobre os eventos do teclado em Javascript: onkeydown, onkeyup e onkeypress. Além disso, veja como acessar e alterar propriedades CSS pelo Javascript.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andrey Knupp Vital    136

Andrey Knupp Vital
Postado 
<html>	
<head>
	<script type="text/javascript">
		window.onkeyup = function( event ) {
			var code = ( event.keyCode ? event.keyCode : event.charCode ) ;
			var element = document.getElementById( 'movable' ) ;
			element.style.left = '';
			element.style.right = '';
			if( code == 76 ) {
				element.style.left = '100';
			} else {
				if( code == 82 ) {
					element.style.right = '200';
				}
			}
		}
	</script>
	<style type="text/css">
		div#movable{
			border: 1px solid #ccc;
			width: 280px;
			margin: 0px auto;
			padding: 5px;
			position: relative;
		}
	</style>
</head>
<body>
	<div id="movable">
		Conteúdo que pode ser movido pelas teclas.
	</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Cara, esses códigos das teclas estão errados, o correto é 37 (left) e 39 (right). Com position: relative, não funciona e também não funcionaria no IE pois ele não passa o evento por parâmetro, coloca o valor em uma propriedade de window. Fiz algumas modificações:

<html>  
   	<head>
           	<script type="text/javascript">
                   	document.onkeyup = function( event ) {
                           	event = event || window.event;
                           	var code = ( event.keyCode ? event.keyCode : event.charCode ) ;

                           	var element = document.getElementById( 'movable' ) ;
                           	element.style.left = '';
                           	element.style.right = '';
                           	if( code == 37 ) {
                                   	element.style.left = '100';
                           	} else if( code == 39 ) {
                                   	element.style.right = '200';
                           	}
                   	}
           	</script>
           	<style type="text/css">
                   	div#movable{
                           	border: 1px solid #ccc;
                           	width: 280px;
                           	margin: 0px auto;
                           	padding: 5px;
                           	position: absolute;
                   	}
           	</style>
   	</head>
   	<body>
           	<div id="movable">
                   	Conteúdo que pode ser movido pelas teclas.
           	</div>
   	</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Perceba que o 

margin: 0px auto;

deixa o elemento centralizado.

Quando você aperta 'L' ou a seta esquerda, ele vai distanciar o elemento 100px da margem esquerda, ou seja, vai deslocar pra direita.

Quando você aperta 'R' ou a seta direita, ele vai 200px pra esquerda.

Ou seja, ficou trocado...

 

Com o position absolute, eu deveria ter tirado esse margin, pois ele não se aplica. Aí as setas funcionam no sentido correto...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andrey Knupp Vital    136

Andrey Knupp Vital
Postado

Pois é, o objetivo era como mover o elemento, acho que fizemos( fiz ) isso .. agora já não é questão minha de arrumação, quem implementa, ver como foi feito, pra tentar fazer igual e tentar deixar do melhor jeito a gosto.

 

;)

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