AJAX drag and drop jquery-vel (húzd és dobd)

---

Elég sok oldalon találkozhatunk manapság különféle AJAX megoldásokkal, melyekkel fellehet dobni, vagy megkönnyíteni egy oldal használatát.
Az egyik igen hasznos és könnyen elsajátítható módszer a Drag and Drop azaz húzd és dobd módszer.
Ennek több fajtája létezik én most az elemek sorrendbe rakásának módszerét fogom bemutatni.


Demó

Mielőtt nekiállnánk szükségünk lesz természetesen a Jquery-re melyet a www.jquery.com oldalról letölthetünk és a JQuery UI pluginra, ezt a www.jqueryui.com oldalról szedhetjük le.
Essünk is neki, illesszük be a két letöltött js fájlt oldalunkba

	<script src="jquery.js" type="text/javascript"></script>
	<script src="jqueryui.js" type="text/javascript"></script>

Állítsuk össze a listát amit sorrendezni szeretnénk

<div id="lista">
<ul>
		<li id="elem_1">A. Elem</li>
		<li id="elem_2">B. Elem</li>	
		<li id="elem_3">C. Elem</li>
		<li id="elem_4">D. Elem</li>
</ul>
</div>

<div id="sorrend">
	  <p>Sorrend feldolgozás után</p>
</div>

Láthatjuk, hogy "lista" id-vel jelöltük a sorrendezhető elemeket és "sorrend" id-vel pedig egy külön div-et, itt fog majd megjelenni a feldolgozás eredménye, melyet egy php fájlal iratunk ki.
Most tegyük be a kódot mely képessé teszi az elemek mozgatását és végrehajtja az új sorrend elküldését a php fájlunknak, ennek a neve refresh.php.

 <script type="text/javascript">
$(document).ready(function(){ 

	$(function() {
		$("#lista ul").sortable({ opacity: 0.5, cursor: 'move', update: function() {
			var order = $(this).sortable("serialize");
			$.post("refresh.php", order, function(theResponse){
				$("#sorrend").html(theResponse);
			});
		}
		});
	});

});
</script>

Láthatjuk, hogy a #lista id-vel elnevezett ul elemeit mozgatás közben az alábbi "behatások érik":
50%-osan áttetsző lesz és az egér kurzor a mozgatás ikonra vált.
Az alábbi sor végül is annyit tesz, hogy a meghatározott "lista" elemein belüli "elem_*"-id-k sorrendjét átadja az elem tömbnek, a megadott szám id-vel.
Ezután az "refresh.php" fájlunknak elküldi ezt post-olt adatként, majd a php fájl tartalmát "behívja" a #sorrend id-vel jelölt elembe.

Lássuk a php-t.

 
<?
 
$elemek = array("A.elem","B.elem","C.elem","D.elem" );
 
foreach($_POST['elem'] as $sor){
 
	echo $elemek[$sor-1] . "";
 
}
 
?>

Létrehoztunk egy $elemek tömböt, mely tartalmazza az elemek neveit eredeti sorrendjükben.
Egy foreach-al végigjárjuk a JQuery által átadott $_POST['elem'] tömböt, mely a megadott sorrendben tartalmazza az eredetileg megadott számokat a li elemek id-éből.
Innentől már csak kiírjuk az adott $elemek tömb elemét a bejárt tömb kulcsával.

Kész is :)