AJAX Drag & Drop, iGoogle

k4muii

Trainee

Posts: 33

1

Tuesday, February 12th 2008, 10:01pm

Hallo

Ich suchen ach einer Möglichkeit mit AJAX Drag & Drop Elemente zu erstellen. Allerdings sollen diese nicht frei im Raum herumschwirren (dazu habe ich viel gefunden via Google), sondern, wie bei iGoogle, in feste Spalten gedropt werden können.

Habe schon Google und die Boardsuche gefragt, aber kam zu keinem gutem Fund ...

Torben Brodt

Administrator

Posts: 8,454

2

Tuesday, February 12th 2008, 10:40pm

Hi, ich hab noch keins davon eingesetzt, aber das sind die beiden, die ich kenne:

Gruß

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

k4muii

Trainee

Posts: 33

3

Wednesday, February 13th 2008, 2:38pm

Danke, das ist genau, was ich gesucht habe

Habe in der Website schon JQuery und werde daher vermutlich auf diese Portlets zurückgreifen

k4muii

Trainee

Posts: 33

4

Thursday, February 14th 2008, 5:48pm

Also ich benutze jetzt die JQuery Portlets, aber eine Frage bleibt noch - wie kann ich das abspeichern? Bei neuladen soll es ja nicht wieder in Urform sein ...

Soweit ich die config.js richtig interpretiere, wird keinerlei ID übergeben und ich pers. weiß auch nicht, wie ich das einbinden sollte ...

Torben Brodt

Administrator

Posts: 8,454

5

Thursday, February 14th 2008, 7:03pm

Bei der Suche nach einer Dokumentation habe ich noch das hier gefunden: http://interface.eyecon.ro/demos/sort.html

Ich weiß nicht, ob das Vorgänger oder Nachfolger ist, jedenfalls hat die Demo einen Serializer und ist zudem dokumentiert: http://interface.eyecon.ro/docs/sort

Ich nehme an du kannst dich in die onChange hängen

	JavaScript Code
1 2 3 4 5 6	$('div.groupWrapper').Sortable( { onChange : function(ser) { alert(ser); },

Ansonsten starte in der toggleContent Methode direkt einen AJAX Request.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

k4muii

Trainee

Posts: 33

6

Thursday, February 14th 2008, 8:15pm

Kannst du mir vlt. konkret sagen, wie ich es einbauen kann? Arbeite noch nicht so lange mit JQuery und bin allgemein nicht so fit in JS ...

Torben Brodt

Administrator

Posts: 8,454

7

Thursday, February 14th 2008, 8:47pm

das boxensystem gefällt mir

So gehts:

JavaScript Code

$('div.groupWrapper').Sortable(
{
	onChange : function(ser)
	{
		var serial = $.SortSerialize([ser[0].id, ser[1].id]);
		$.post('status.php', serial.hash);
	},

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

k4muii

Trainee

Posts: 33

8

Thursday, February 14th 2008, 10:23pm

Danke soweit schon einmal, dass du mir bis hierher geholfen hast

Es funktioniert jetzt und ich habe folgenden Code als Testausgabe

	JavaScript Code
1	document.all.text.innerHTML = serial.hash;

Allerdings ist die Ausgabe fehlerhaft: " sort1[]=newsFeeder&sort2[]=shop&sort2[]=news " (Ich habe "News" von sort1 nach sort2 verschoben). Wie man sieht fehlt die gesamte 3. Spalte ...

This post has been edited 1 times, last edit by "k4muii" (Feb 14th 2008, 10:33pm)

Torben Brodt

Administrator

Posts: 8,454

9

Thursday, February 14th 2008, 10:48pm

das ist doch das coole dran, es werden nur die Spalten mit Änderungen übertragen

Welche das sind, steht im Parameter ser.

Du kannst aber auch den Parameter ignorieren, und einfach alles serialisieren

JavaScript Code

$('div.groupWrapper').Sortable(
{
	onChange : function(ser)
	{
		var serial = $.SortSerialize();
		$.post('status.php', serial.hash);
	},

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

k4muii

Trainee

Posts: 33

10

Thursday, February 14th 2008, 10:55pm

Danke, funktioniert 1a :]

miriam

Beginner

Posts: 11

11

Thursday, March 13th 2008, 10:21am

Hi,

Ich hab leider irgendwie das Problem, dass dieses Script (gepostet von d0nut) im Internet Explorer 6 und 7 nicht richtig funktioniert.
Wenn ich eine Spalte leermache, dann kann ich nichts mehr draufziehen. Siehe Link : http://screencast.com/t/oLIZ1z5mHsj

Gibts da eine Abhilfe, bzw. kann man das irgendwie lösen ?

Vielen lieben Dank,
Miriam

Torben Brodt

Administrator

Posts: 8,454

12

Thursday, March 13th 2008, 9:09pm

Funktioniert die Demo aus meinem ersten Posting? "Portlets"
Weil das basiert auf dem besser dokumentierten Original. Kann also vermutlich auf die gleiche Art erweitetert werden.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

miriam

Beginner

Posts: 11

13

Friday, March 14th 2008, 9:47am

Hallo !

Mit dem "Portlets" funktioniert es , vielen Dank

Habe beide Quellcodes auseinandergenommen,
wollte beim "Portlets" nun die Ajax Abfrage einbauen,
bzw. habe auch versucht den geposteten JavaScript Code zu implemenierten,
aber irgendwie mach ich glaub was falsch. Bekomme leider noch kein Ergebnis
mit dem "serialize all lists".

Also möchte eigentlich nur

JavaScript Code

$('div.groupWrapper').Sortable( 
{ onChange : function(ser) 
{ var serial = $.SortSerialize(); 
$.post('status.php', serial.hash); },

in den "Portlets" einbauen.
aber wo muss der genau hin, bzw muss ich noch was umbauen , damit das funktioniert ?

Vielen lieben Dank,
Miriam

Torben Brodt

Administrator

Posts: 8,454

14

Friday, March 14th 2008, 7:10pm

Hast du Firebug? Wechsel dort man ins Tab DOM und schau dir die ganzen JUERY Variablen an... irgendwo ist die Liste versteckt... die muss du serialisieren.
Mal schauen wie ich morgen Zeit hab.. ich schaus mir vielleicht auch nochmal im Detail an.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

miriam

Beginner

Posts: 11

15

Monday, March 17th 2008, 11:43am

Hallo,

Vielen Dank für Deine Antwort, hab mir gerade den Firebug installiert, und gugge gerade durch.
Sind da viele Sachen boah. Ich halte gerade Ausschau von dem "grünen" nach sort1,sort2,sort3 damit ich einen Anhaltspunkt habe.
Die "grüne" ist anders aufgebaut, die hat nen DIV rundherum, wo die "beige" nur TD hat.

edit:

"grüne" : http://interface.eyecon.ro/demos/sort.html
"beige" : http://host.sonspring.com/portlets

miriam

Beginner

Posts: 11

16

Monday, March 17th 2008, 6:03pm

Hi,

hab glaub das "grüne" reparieren können, hab mal den aussenliegenden DIV eine Hintergrundfarbe gegeben,
und dabei gesehen, das die nur 1px ist, und die dann nach dem "hin - und herschieben" plötzlich verschwindet.
Wenn ich nun zb 100 px mache, funktionierts,

)))))))
Liebe Grüße
Miriam

This post has been edited 1 times, last edit by "miriam" (Mar 17th 2008, 6:50pm)

miriam

Beginner

Posts: 11

17

Wednesday, March 19th 2008, 5:08pm

Hallo, Ich bins nochmal,

Scheint leider doch nicht so richtig noch zu funktionieren :/
Ich muss jedesmal den "Groupwrapper" berühren, um den DIV zu platzieren.
(Deswegen hab ich den Groupwrapper nun auch height:20px gemacht,
aber sollte auch nicht, sonst verschiebt sich das ja alles nach unten wenn eine Spalte leer ist)
Bei IGoogle gehts sofort, ohne jedesmal die Stelle vom "Groupwrapper" zu suchen.
Hab hier meinen Link : http://ichbinsmiriam.ic.ohost.de/test1/

Was könnte da noch das Problem sein ?

LG Miriam

This post has been edited 1 times, last edit by "miriam" (Mar 25th 2008, 10:08am)

Torben Brodt

Administrator

Posts: 8,454

18

Wednesday, March 19th 2008, 8:08pm

blick bei dem Code nicht durch...
aber hab mal nen kleinen Serialisierer für Portlets begonnen. Gib den verschiebbaren Containern jeweils eine id.

Mit folgender Funktion erhältst du ein Zweidimensionales Array arr[spalte][portlet]

	JavaScript Code
1	foo = jQuery.map($('#columns td'), function(a) {return $(a).find('.portlet') });

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

miriam

Beginner

Posts: 11

19

Thursday, March 20th 2008, 6:27pm

Hallo,

Vielen Dank für Deine Antwort, aber leider weiss ich nicht wie / wo ich das einbaue, bei den Portlets.

Habs versucht, unter onchange : function {, und den divs eine einzigartige ID zu geben, aber hat sich leider nix getan.

LG miriam

Snowflake

Professional

Posts: 370

20

Saturday, March 22nd 2008, 1:43am

So wie das ganze bei Miriam immoment läuft, find ich das gar nicht schlecht.

Auf deren Seite findet man aber keine wirkliche anleitung die einem erklärt, wie man sich das ganze selber aufbaut oder?
Denn so wie miriam das hat, dass die position nach verschieben in nem array angezeigt wird, das könnte ich ganz gut gebrauchen.

Coder Forum