jquery multiple sortable() und handler...

[Paykoman]

Hallöchen,

ich bin schon ne ganze Weile daran zugange und habe atm Probleme mit der sortable() Funktion.

Nun eine Demo habe ich hier (jsfiddle) online, damit ihr direkt sehen könnt was schief läuft.

Musste einige andere JS-Scripte unten anhängen damit es soweit wieder läuft aber im großen und ganzen bis auf die resort funktionen (weil ich ja die eigentlichen sortable() ausgeklammert habe), klappt alles auch wie in meinem System...


Die Struktur startet mit einer <ul> in dem die main items enthalten sind, diese enthalten jeweils eine <ol> mit subitems, je ul > li ist maximal eine ol mit beliebigen items möglich! Jedoch sowohl die ul als auch die ol`s sollen sortable sein, bei der ul klappt es einwand frei nur bei den ol`s leider nicht und zu testzwecken habe ich beim starten der sortable() eine Funktion eingebaut welche in der console anzeigt was angesprochen wird.

Wie man dann merken wird, wird immer die sortable()-Funktion aus der ul angesprochen aber nicht die eines Subelements(ol) welche extra eine eigene Klasse für den handler hat.


Hat da Jemand ne Idee woran es leigen könnte und wie ich es fixen könnte? Bin echt ratlos =(


MFG: Paykoman

[rkr]

Was soll das denn eigentlich werden? Bei mir ist das total kaputt (chrome/win).

[tkausl]

Das Problem ist, dass

$(".sortableTandC").sortable

an ein Element gebunden wird, welches erst existiert NACHDEM ein Block geadded wurde. Verschiebe ich das ganze innerhalb die Add-Funktion ganz ans ende funktioniert es.

Siehe: http://jsfiddle.net/VS7x5/1/

[Paykoman]

Hmm, kaputt sollte es eigentlich nicht sein, ich entwickle auch in chrome also vondahe aber vom css her hängt das ein oder andere daneben weil es aus meinem system raus gerupft ist...


Naja man muss natürlich zuerst den add-Button klicken dann wird in der vorgegeben <ul> eine textarea und eine <li> hinzugefügt.

In dem neuen li ist dann die <ol> mit weiteren textareas in <li>...

und naja so baut sich das ganze dann auf..

Zugehörig ist es zu nem etwas umfangreicheren System und würde glaube ich den Rahmen Sprengen, es geht ja nur um die 2 handler die in sortable() definiert sind weil nur einer funktioniert =(

Aber klick mal 3 mal hinternander (langsam) auf den add-Button dann solltest du rechts immer 3 Icons haben das in der mitte dient zum ein und ausklappen dann kannst du erstmal alle 3 einklappen, dann sieht man schon mal mehr worauf es hinausläuft.
Mit dem linken Icon kann man die 3 elemente sortieren...

Nun kannst ein Element mal wieder aufklappen dann hast du unten nen runden und grünen add-Button da 2 mal klicken und wieder hast du 3 elemente die sortier bar sein sollen wo wieder die icons sind aber jedoch der linke handler nicht funktioniert

[Paykoman]

Das Problem ist, dass

$(".sortableTandC").sortable

an ein Element gebunden wird, welches erst existiert NACHDEM ein Block geadded wurde. Verschiebe ich das ganze innerhalb die Add-Funktion ganz ans ende funktioniert es.

Siehe: http://jsfiddle.net/VS7x5/1/

Das muss ich noch mal in Ruhe lesen, werde nicht ganz schlau daraus aber ja das mit den nachträglichinzugefügten ist mir im prinziep einleuchtend, ist ja öfters nen Problem.

Ach ja die <ul> habe ich ja schon definiert und bekommt ja nur neue li`s, stimmt, ok nachm Essen schaue ich mal

[rkr]

Warum machst du das eigentlich mit jQuery und nicht mit Angular?
http://jsfiddle.net/VS7x5/3/

[Paykoman]

Hmm, angular ist mir fremd und sieht umständlicher aus zumal eine ebene in deinem Beispiel noch fehlen würde und da wirds sicher wieder kompliziert

Und es müsste wieder wieder mehr ressourcen geladen werden, dabei fallen schon genug script und css Dateien an *g*

@tkausel: Danke funktioniert, Jquery holpert zwar ganz schön bei den Subelementen aber naja kp ob ich das noch gefixt bekomme.

Vllt. wenn die Platzhalter die selbe größe hätten und sich net so argh verschieben würde aber weiß noch nicht wie man die definiert oder mal ohne ausprobieren.

[rkr]

Hmm, angular ist mir fremd und sieht umständlicher aus

Es ist definitiv nicht umständlicher als fast alles, was du mit jquery typischerweise so machst. Idr kommst du zum gleichen Ergebnis mit 50% weniger Code (tendentiell noch weniger).

zumal eine ebene in deinem Beispiel noch fehlen würde und da wirds sicher wieder kompliziert

Nope