[js+php]zamienianie dwóch elementów ze sobą

Witam
Zobaczcie na kod:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	function id(id){
		return document.getElementById(id);
	}
	function f_move(dir, elem){
		// dir:1 -> up, dir:2 -> down
		box=elem.parentNode.parentNode; //div.box
		sibling=0;
			if (dir==1){
				var sibling=box.previousSibling; // element previous to div.box
				
				//$(sibling).before(box);
				
				//tmp=sibling;
				//$(box).before(sibling); //insert sibling before element
				//$(sibling).remove();
				//$(box).after(tmp);
				
				//$(box).insertBefore(sibling);
				
				id('structure').insertBefore(box, sibling);
				
			}else if (dir==2){
				var sibling=box.nextSibling; //next element to div.box
				
				//$(sibling).after(box);
				
				//tmp=sibling;
				//$(box).after(sibling);
				//$(sibling).remove();
				//$(box).before(tmp); 
				
				//$(box).insertAfter(sibling);
				
				id('structure').insertBefore(sibling, box);
							
			}
			
		return false;
	}
</script>
<style type="text/css">
	#structure{
		padding-left: 20px;
	}
	div.box{
		width: 200px; height: 50px;
		border: 1px dotted #111; background: #F9F9E9;
		margin: 4px; text-align: center;
	}
	
	div.box p{
		margin: 0; padding: 1px;
	}
</style>
<div id="structure">
	<?php
		$str='<div class="box"><p>Id: <strong>{id}</strong></p><p><a href="" onclick="return f_move(1, this);">Góra</a>&nbsp;<a href="" onclick="return f_move(2, this);">Dół</a>&nbsp;</p></div>';
		for ($i=0; $i<7; $i++){
			$search='{id}'; $replace='bx'.$i;
			echo str_replace($search, $replace, $str); echo "\n";
		}
	?>
</div>

Strona wyświetla parę elementów. Jeśli użytkownik kliknie na 'Góra', to element ma się zamienić z poprzednim, jeśli kliknie 'Dół', to ma się zamienić z następnym. 4 sposoby na to znalazłem ( zakomentowane linie w kodzie JS ), w tym jak widać, używające metod z jQuery ;)

Wszystkie działają tak samo, ale nie tak jak bym chciał. Czasami wystarczy raz kliknąć, żeby elementy się zamieniły, czasami kilka razy. Chciałbym zrobić to w ten sposób, żeby elementy się zamieniły tylko po jednokrotnym kliknięciu na 'Góra'/'Dół', co teraz nie zawsze wychodzi ... Przetestujcie sami zresztą.

Jest na to jakiś sposób ?

kodu nie oglądałem ani nie testowałem ale pewnie chodzi ci tylko o zamianę zdarzenia wykonania z onclick na onmouseup np
albo druga wersja że przemieszcza nie divy tylko też puste elementy, rozwiązanie wtedy to usunąć białe znaki z kodu lub sprawdzać czy element jest divem a jeśli nie to powtórzyć funkcję

nie zrozumiałeś mnie Adamo, warto było zerknąć na/uruchomić kod ;-)

więc wytłumaczę jeszcze raz:

1. php robi i wyświetla listę elementów, wg schematu; każdy element to div z klasą box
2. wyświetla w jakimś tam porządku
3. użytkownik chce zmienić ów porządek, np. div'a na samym dole przenieść do góry
4. w tym celu klika na 'Góra' parę razy
5. okazuje się, że kliknięcie raz nie zmienia pozycji elementu, potrzeba kilka razy, aby element przeszedł na pozycję wyżej
6. innym razem wystarczy raz kliknąć, żeby element się przemieścił

pytanie: jak zrobić, żeby użytkownik kliknął TYLKO RAZ, a element się zmienił swoją pozycję ?

radzę uruchomić kod i dokładnie obczaić co i jak, żebym nie musiał tłumaczyć ponownie ;-)

Usuń echo "\n"; - biały znak jest traktowany jako wezel drzewa, a wiec .after i .before tyczy się jego. Po kilku zamianach masz kilka \n obok siebie i zamieniasz kazde miejscami. O tym właśnie pisał Adamo.

no cóż, to ja nie zrozumiałem Adama do końca, sorki ;-)
wyciąłem "\n" i działa
dzięki za pomoc i wytłumaczenie