✔ sortable list mit unterlisten funktioniert nicht?

[mogmog]

Guten Morgen zusammen ich habe mal wieder eine Frage.

also ich habe eine liste in der weitere listen sind und die soll einfach per drag and drop verschiebbar sein das funktioniert aber nicht so richtig woran kann das liegen? Zumindest nicht mit jedem einzelnen listen Element.

Dies ist die html Ausgabe:

<ul id="menu" class="child_0">
	<li class="child_0 sort">menu1<ul class="child_1"></ul></li>
	<li class="child_0 sort">menu2
		<ul class="child_2">
			<li class="child_2 sort">liste element1<ul class="element1"></ul></li>
			<li class="child_2 sort">liste element2<ul class="element2"></ul></li>
			<li class="child_2 sort">liste element3<ul class="element3"></ul></li>
			<li class="child_2 sort">liste element4
				<ul class="child_4">
					<li class="child_4 sort">liste element5<ul class="element5"></ul></li>
					<li class="child_4 sort">liste element6<ul class="element6"></ul></li>
					<li class="child_4 sort">liste element7<ul class="element7"></ul></li>
					<li class="child_4 sort">liste element8
						<ul class="child_8">
							<li class="child_8 sort">liste element9</li>
							<li class="child_8 sort">liste element10</li>
							<li class="child_8 sort">liste element11</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="child_0 sort">menu3
		<ul class="child_3">
			<li class="child_3 sort">liste element12<ul></ul></li>
			<li class="child_3 sort">liste element13<ul></ul></li>
			<li class="child_3 sort">liste element14<ul></ul></li>
		</ul>
	</li>
	<li class="child_0 sort">menu4<ul></ul></li>
	<li class="child_0 sort">menu5<ul></ul></li>
</ul>

und das ist das JQuery javaskript:

$(function() {
	$("#menu").sortable({ connectWith: '.sort li', placeholder: 'placeholder', forcePlaceholderSize: true });
	$("#menu").disableSelection();
});

So lassen sich leider nur alle Elemente verschieben die mit der Klasse "child_0" wie kann ich das aber auf jedes Element anwenden und so das sich einfach alle in das darunterliegende <ul></ul> Element verschiebt?

 

[Sven Mintel]

Das kannst du über die Option items regeln...diese erwartet einen Selektor, der auf die sortierbaren Elemente zutrifft.
Standardwert ist

 > *

Dies findet alle Kindknoten des sortierbaren Elementes, in deinem Fall also alle .child_0

li.sort

sollte das Gewollte tun.

 

[mogmog]

mmm das ist sehr merkwürdig ich habe es versucht und das funktioniert leider auch nicht.

ich habe mal alle Dateien abgehangen vielleicht hilft dir das weiterhelfen?
oder sollte ich für diesen Fall eine andere Methode wählen?
d.h. keine liste sondern einfach andere Elemente und dann irgendwie definieren wie Elemente in unter Elemente verschoben werden können.

 

[Sven Mintel]

Mmmh, bei mir geht das problemlos

<script type="text/javascript">

$(function() {
	$("#menu").sortable({
        connectWith: 'li',
        placeholder: 'helper',
        helper: 'clone',
        forcePlaceholderSize: true,
        items:'li.sort'
            });

	$("#menu").disableSelection();
});

</script>

Hab einfach nur die fett markierte Zeile eingefügt, sonst nichts am ZIP verändert.

 

[mogmog]

Hey danke dir

also ich habe items:'li.sort' noch mit rein kopiert und schon hat es auch gut funktioniert. Ich finde zwar das es von der Bedienbarkeit her etwas hölzern wirkt (so wie der helper springt) aber es geht schon mal.

gibt es eigentlich auch eine möglichkeit es so zu erstellen das die Elemente nur in ul Elemente verschoben werden können?

ähnlich wie dem nasted sort in der angehangenen Datei. ich würde das nur gern verstehen was da passiert und gern selber mit jquery erstellen.

würde mich freuen wenn mir da weiter geholfen werden kann.
das Einzige Problem bei dem sort ist auch das man im IE ein Element nur einmal anpacken kann und verschieben kann.

 

[Sven Mintel]

Dafür gibt es die Option containment,

also:

containment: 'ul',

items-> das was sortiert werden darf
containment->das, wo es hineinsortiert werden darf

 

[mogmog]

Hallo

danke dir für die Antwort.
leider hat auch das nicht ganz den erwünschten Effekt. Ich habe immer noch das Problem das wenn ich z.Bsp.:

<li class="child_0 sort">menu4<ul></ul></li>
<li class="child_0 sort">menu5<ul></ul></li>

per drag an drop so verschieben will:

<li class="child_0 sort">menu4
   <ul><li class="child_0 sort">menu5<ul></ul></li>
   </ul>
</li>

ich kann leider kein li in ein ul verschieben das keine sub Elemente (li)enthält woran liegt das?

Ich verstehe es leider nicht lt. deiner Erklärung und der von jquery sollte es ja mit

containment: 'ul',

funktionieren.


Jquery:
Constrains dragging to within the bounds of the specified element - can be a DOM element, 'parent', 'document', 'window', or a jQuery selector.
Code examples

Initialize a sortable with the containment option specified.

$('.selector').sortable({ containment: 'parent' });



ich habe auch mal alle jquery Elemente aktualisiert.

ich habe es gerade noch mal versucht mit div´s statt Listenelementen und es geht auch net wirklich ich einfach nur das man die grünen Elemente in die roten Elemente verschieben kann.

 

[Sven Mintel]

Achso, das meinst du.
Da müsstest du in die leeren <ul> noch ein leeres <li> einfügen.

 

[mogmog]

WOW sorry das war Grad parallel.


das funktioniert leider auch nicht. Wie würdest du das Problem noch angehen?
anbei nochmal die geänderte listen Version.

Du meinst so?

<ul id="menu" class="child_0 sub">
	<li class="child_0 sort">menu1<ul class="child_1 sub"><li></li></ul></li>
</ul>

 

[Sven Mintel]

Ich würde das ebenfalls per JS statt übers Markup lösen, da eine <ul> die eingangs nicht leer ist, später leer sein kann.

Ich verwende das selbst bei einem Projekt...jetzt muss ich erstmal zur Schicht, ich poste heut nacht mal nen Beispiel, wie es geht.