função jquery para mover div vinda do BD dinamicamente em página php

Valeu pela dica Handoncloudsys, mas eu também não entendo de javascript e então fiquei na mesma pois não consegui fazer a tua ideia decolar, mas vou tentando ver como fazê-la funcionar, talvez dê sim, estou procurando algo como this.id ou algo assim, nem sei por onde começar porque não consigo também formular perguntas para pesquisar pela internet, kkkkkkkkkk,

eu fiz o seguinte:

coloquei a função dentro o while e adicionei o id dinâmico na função e funcionou, mas não acho que esteja certo, ou está?
Pra mim foi uma "gambiarra" pois penso que a função deveria ser única.

ficou assim:

<?php
$sql_videos = mysql_query("SELECT * FROM videos LIMIT 4");

	while($todos_videos = mysql_fetch_array($sql_videos)){
	$id = $todos_videos['id'];
	$nome = $todos_videos['nome'];
	$videoclipe = $todos_videos['videoclipe'];
	$descricao = $todos_videos['descricao'];

//retirando caracteres da string $video para poder exibir a imagem em vídeo

	$capa_video = substr($videoclipe, 32); //Retira os 32 primeiros caracteres;
?>
	<!-- função animate --->
	<script type="text/javascript">
 $(function() {
 $("#<?php echo $id;?>").click(function(){
 $(".<?php echo $id;?>").animate({
 // distancia da margem a esquerda
 marginLeft: "0px",
 // distância do topo
 marginTop: "-205px"
 // tempo de execucao - milissegundos
 }, 1000, function() {
 $(this).html();
 });
 });
	});
	</script>
	<div id="video">
 <div class="<?php echo $id;?>">
 <div id="<?php echo $id;?>" class="bt_play_video"></div>
 <div class="descricao">
 <?php echo $descricao; ?>
 </div><!-- div id="descricao" -->
 <img class="sobe" src="https://i.ytimg.com/vi/<?php echo $capa_video;?>/mqdefault.jpg" />
 <iframe class="sobe" src="//www.youtube.com/embed/<?php echo $capa_video;?>?vq=hd1080?fs=1&autohide=1&theme=light&hl=en_US&PARAMETER" frameborder="0" allowfullscreen>
 </iframe>
 </div><!-- div class="movable" -->
	</div><!-- div id="video" -->
<?php
	} //@ fecha while($todos_videos = mysql_fetch_array($sql_videos)){
?>

Alguém pode me dizer se oque eu fiz está correto ou é mesmo uma gambiarra? se for gambiarra, como fazer?

Obrigado.
OBS: As alterações já foram feitas no site online, é só ir lá pra conferir.

Ainda não dei como resolvido porque ainda estou achando que fiz uma gambiarra.

Bem, pelas regras do W3C, não pode haver mais de um mesmo ID, então esse seu loop tá criando vários ID video e move

O que vc quer fazer é alterar a organização de elementos de uma página HTML? Porque se se for, então teu questionamento é mais Javascript, especificamente jQuery.

<!-- função animate --->

<script type="text/javascript">
$(function() {
$(".bt_play_video").click(function(){
 $(this).parent(".movable").animate({ // Linha que alterei, pega o elemento pai '.movable' do elemento '.bt_play_video' que foi clicado
 // distancia da margem a esquerda
 marginLeft: "0px",
 // distância do topo
 marginTop: "-205px"
 // tempo de execucao - milissegundos
 }, 1000, function() {
 $(this).html();
	});
 });
});
</script>

PS: Não testei, mas deve alterar o CSS que tá alterando ai no teu código. Acredito que não terá o resultado esperado, pois ele apenas altera a informação do que clicou, então se clicou em 3, os 3 terão subido e nenhum voltado.

Diegus Miestro, este seu script não funcionou, mas obrigado pela tentativa.

Oque você quis dizer com isso aqui?
"Bem, pelas regras do W3C, não pode haver mais de um mesmo ID, então esse seu loop tá criando vários ID video e move".

Se eu entendi bem, então devo te explicar que não, o looping não está criando, ele está buscando do Banco o id de cada vídeo, portanto não existe id duplicado.

Se na regra do W3C não pode haver o mesmo id, então pela regra deles eu estou certo, mesmo achando que o W3C não é o dono da verdade.

Depois de pesquisar bastante pela web não encontrei nada que pudesse me ajudar, ninguém me falou pra colocar o script dentro do looping, eu mesmo pensei nisso, foi daí que veio a dúvida, será que está certo? não tem uma outra forma de fazer?

Mesmo assim, obrigado, mas ainda estou pesquisando por uma outra forma de fazer a "identificação do box do bt_play_video clicado" porque se o script não estiver dentro do looping e o botão bt_play_video for clicado ele vai mover todos os div´s com a classe move e não importa em qual box o botão estã.

Por enquanto o script vai ficar dentro do looping mesmo.

portanto não existe id duplicado.

ele está falando do atributo ID do html:

<div id="<?php echo $id;?>" class="bt_play_video"></div>ai você duplica o ID do html. 

mesmo achando que o W3C não é o dono da verdade.

eles não são, mas ai é a definição da linguagem HTML.
A linguagem HTML não permite que você tenha IDs duplicados no HTML. Pois isso torna impossível para o JavaScript selecionar os elementos.

ninguém me falou pra colocar o script dentro do looping

isso é errado, pois vai te causar mais problemas.

A forma correta de fazer, é como o @Diegus mostrou:

$(this).parent(".movable")utilizando o this e navegando no DOM.

Bem, fiz um exemplo que não sei se é o que vai resolver o teu problema, mas vale dar uma olhada.

PS: Fiz de forma que possa haver mais de uma lista na mesma página sem haver interferência uma com a outra

PS2: Como disse, HTML não pode repetir o ID, então coloquei tudo como class, que pode haver repetição e mais de um no mesmo elemento

http://jsfiddle.net/h1ek4kn4/1/

Agora entendi o que o Diegus Maestro quis dizer graças ao William Bruno, que por acaso tenho seguido vários tutoriais no seu site.

E a você Diegus, o meu muito obrigado, eu ví o seu exemplo e ficou muito bom, nem vou colocar oque eu fiz porque a partir do teu exemplo pode-se usá-lo para outras funcionalidades, é só usar a imaginação.

Dou como resolvido este meu tópico e obrigado novamente aos dois.

Até a próxima.