drag and drop Opcje

[zaajcu]

cześć.
Potrzebuje zrobić coś w tym stylu , sortowanie listy np takiej:

[HTML] pobierz, plaintext 
<ul id="sort">
	<li id="A1">A1
		<ul>
			<li id="A1.1">A1.1</li>
			<li id="A1.1">A1.2
				<ul>
					<li id="A1.2.1">A1.2.1</li>
					<li id="A1.2.2">A1.2.2</li>
					<li id="A1.2.3">A1.2.3</li>
				</ul>
			</li>
			<li id="A1.3">A1.3</li>
		</ul>
	</li>
	<li id="A2">A2</li>
</ul>
[HTML] pobierz, plaintext 

To ma być coś w stylu kategorii i podkategorii chodzi o to żeby można było wziąć chwycić jakiś podkategorie lub grupę kategorii i przenieść ją do innej kategorii lub podkategorii, chwytanie opanowałem działa mi ok zrobione jest tak:

[HTML] pobierz, plaintext 
$(function() {
	$('#sort li').draggable({
		revert: true,
		cursor: 'move',
	});
 
	$('#sort li').droppable({
		drop: function(){alert(this.id);}
	})
 
})
 
[HTML] pobierz, plaintext 

li tu zaczynają się schody, na początek dodam że nie znam javascript'u jakoś bardzo dobrze można powiedzieć, że dopiero zaczynam się z tym bawić więc proszę o takie bardzo proste i szczegółowe odpowiedzi będę wdzięczny.
Pierwszy problem to taki, że nie ważne gdzie przeniosę dany element alert zawsze zwraca mi id "A1" pierwszego bloku :/
kolejny problem to nie mam pojęcia jak to tam przenieść.

Ten link co podałem u góry niby załatwia sprawę, ale tam nie mogę się w tym połapać a poza tym wolał bym to napisać od zera i zrozumieć jak to działa i o co tam chodzi a nie bezsensu kopiować cały kod i adaptować go tak żeby działał u mnie na www.

Pozdrawiam
zaajcu (IMG:style_emoticons/default/wink.gif)


Trochę sobie poradziłem.
Mam natomiast dalej problem z tym w droppable alert wyświetla mi zawsze to A1 :/ a nie ten obiekt na który położyłem inny obiekt. :/
jak to naprawić (IMG:style_emoticons/default/wink.gif)

dobra problem rozwiązany (IMG:style_emoticons/default/wink.gif)