✔ jQuery sortable -> Mehrdimensionales Array ordnen ?

B

bachstelze

Grünschnabel
Hi,

ich habe ein Problem mit der sortable Funktion von jQuery, und zwar habe ich ein mehrdimensionales Array mit 3 ebenen, welches mit PHP dynamisch in einer aufklappbaren bzw. verschachtelten Baumansicht ausgegeben wird.
das ordnen der obersten ebene klappt soweit.

Man kann sich das ganze so vorstellen:
  • element 1 ebene 1
    • element 1 ebene 2
      • element 1 ebene 3
  • element 2 ebene 1
    • element 2 ebene 2
      • element 2 ebene 3

Ich kann also schon das Element 1 von Ebene 1 inkl. alle unteren Ebenen davon per Drag & Drop verschieben. (man kann also Element 1 von Ebene 1 unter Element 2 Ebene 1 verschieben -> nicht so, dass es ein unterelement ist, sondern dass aus Element 1 Ebene 1 -> Element 2 Ebene 1 wird).
Mein Problem ist, dass die unterelemente zwar schon verschoben werden, allerdings springen sie immer wieder auf ihre ursprungsposition zurück -> also praktisch ein drag ohne drop ;)


Was jetzt also noch fehlt ist eine verschiebung der unterelemente
Die Elemente sollen untereinander nur auf ihrer eigenen Ebene verschoben werden können d.h. ich darf kein Element von Ebene 3 auf Ebene 2 oder 1 verschieben können.

Da ich leider nicht wirklich viel Ahnung habe von JavaScript/jQuery weiss ich nicht genau, wie ich das angehen soll.

hier mal der Quellcode der sortable Funktion:

PHP: 
<script type="text/javascript">
$(function() 
    {
        $("#list ul").sortable({ axis: 'y', delay: 200, opacity: 0.7, cursor: 'move', update: 
        	function() 
	        {
        		var order = $(this).sortable("serialize") + '&update=update'; 
	        	$.post("updateList.php", order, 
		        	function(theResponse)
	        		{
	        		$("#response").html(theResponse);
	        		$("#response").slideDown('fast');
	        		slideout();
		        	 }
	        	); 															 
	        }								  
        });
    }
);
</script>

Ich Hoffe das ist halbwegs verständlich, was ich geschrieben habe und was ich meine ;)
 
Dein Code Funktioniert bei mir wie gewünscht.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Sortable</title>
</head>

<body>
	<div id="list">
		<ul>
			<li>
				More
				<ul>
					<li>
						Foo
						<ul>
							<li>Hans</li>
							<li>Gerd</li>
							<li>Olaf</li>
						</ul>
					</li>
					<li>
						Bar
						<ul>
							<li>Hans</li>
							<li>Gerd</li>
							<li>Olaf</li>
						</ul>
					</li>
					<li>
						Baz
						<ul>
							<li>Hans</li>
							<li>Gerd</li>
							<li>Olaf</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				Bacon
				<ul>
					<li>
						Foo
						<ul>
							<li>Hans</li>
							<li>Gerd</li>
							<li>Olaf</li>
						</ul>
					</li>
					<li>
						Bar
						<ul>
							<li>Hans</li>
							<li>Gerd</li>
							<li>Olaf</li>
						</ul>
					</li>
					<li>
						Baz
						<ul>
							<li>Hans</li>
							<li>Gerd</li>
							<li>Olaf</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				Strips
				<ul>
					<li>
						Foo
						<ul>
							<li>Hans</li>
							<li>Gerd</li>
							<li>Olaf</li>
						</ul>
					</li>
					<li>
						Bar
						<ul>
							<li>Hans</li>
							<li>Gerd</li>
							<li>Olaf</li>
						</ul>
					</li>
					<li>
						Baz
						<ul>
							<li>Hans</li>
							<li>Gerd</li>
							<li>Olaf</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(function() {
		$("#list ul").sortable({ axis: 'y', delay: 200, opacity: 0.7, cursor: 'move'});
	});
	/* ]]> */
	</script>
</body>

</html>

Oder willst du, dass man auch Listen übergreifend sortieren kann. Also "element 1 ebene 3" mit "element 2 ebene 3"?

EDIT: Hier mal aufs wesentliche beschränkt, falls du alles auf der gleichen Ebene willst
Javascript: 
$("#list > ul")
	.sortable({ connectWith: '#list > ul' })
	.find('> li > ul')
	.sortable({ connectWith: '#list > ul > li > ul' })
	.find('> li > ul')
	.sortable({ connectWith: '#list > ul > li > ul > li > ul' });
 
Zuletzt bearbeitet:
Ich glaub ich hab mich oben nicht richtig ausgedrückt .. Sorry ;)

also ich habe auf Ebene 3 mehrere Elemente -> so, wie es bei dir ist

HTML: 
<ul>
	<li>
		More
		<ul>
			<li>
				Foo
				<ul>
					<li>Hans</li>
					<li>Gerd</li>
					<li>Olaf</li>
				</ul>
			</li>
			<li>
				Bar
				<ul>
					<li>Hans_1</li>
					<li>Gerd_1</li>
					<li>Olaf_1</li>
				</ul>
			</li>
			<li>
				Baz
				<ul>
					<li>Hans_2</li>
					<li>Gerd_2</li>
					<li>Olaf_2</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

jetzt sollen nur die Elemente "Hans" "Gerd" und "Olaf" untereinander verschoben werden können und nicht zu "Hans_1" oder "Hans_2" sowie deren übergeordneten Elemente.

zur Verständlichkeit: das ganze dient einer Menüstruktur um verschiedene Elemente anordnen zu können.
 
Kopiere mal mein HTML in ein leeres Dokument (ohne mein EDIT). Das macht exakt das. Sortable beschränkt sich standardmäßig auf die Elemente in der gleichen Liste. Also kannst du Hans nicht mit Hans_1 mischen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück