kleine Bilder (Icons) dynamisch auf einer "Arbeitsfläche" anordnen

[lukelukeluke]

Hallo zusammen,

Ich suche nach einer OpenSource JavaScript Library, mit welcher ich kleine Icons auf einer Fläche umherschieben und anordnen kann. Das ganze möchte ich in eine Datenbank speichern, eine Bewegung eines Objekts sollte also gleich ein Datenbankupgrade ausführen (über PHP).

Wenns sowas nicht direkt gibt würde mir auch schon ein Skript helfen, welches kleine Bilder anhand von Koordinaten in einem Feld anordnen kann.

Was ich eigentlich machen möchte: Ich würde gerne mein Netzwerk darstellen lassen (Server / Router / Switches), wobei ich zu jedem Gerät gewisse Informationen hinterlegen möchte. Man sollte also auf einer Seite alle die Switches als Icons sehen und bei einem klick oder rollover sollen die Infos angezeigt werden.

Kennt jemand eine solche OpenSource Library?

Danke!
Gruss,
Lukas

 

[tobee]

Da kann ich dir als Grundlage das Skript von Quaese empfehlen.
http://playground.quaese.de/tutorials/dragable_elements/
Die Grundlage dort sind allesdings Cookies. Aber vllt. hilft dir da Quaese weiter

 

[lukelukeluke]

Absolut geniales Skript, vielen Dank für den Hinweis.
Habe es gleich angepasst, so dass es zusammen mit PHP die Koordinaten in eine Datenbank statt in ein Cookie schreibt. Ich hoffe ich darf dieses Skript anpassen und verwenden, brauche es ja nicht kommerzionell sondern nur auf meiner Server- Überwachungsseite.
Das funktioniert sogar auf Mac mit Safari/Firefox und auf Linux habe ichs auch getestet, absolut 100% kompatibel. Super!

Das habe ich gebaut: http://dev.webser125.lookass.ch/DragNDrop-AjaxJS/quaese_modified.php

Wens interessiert, hier auch der Code der PHP File (als txt): http://dev.webser125.lookass.ch/DragNDrop-AjaxJS/

Leider muss ich für die Objekte eine ID und eine NR haben, da das JavaScript anscheinend nur Objekte in strenger aufeinander folgender Rheinfolge bearbeiten kann, welche bei 0 starten (0,1,2,3).

Super wäre natürlich, wenn man jetzt noch Linien auf die Fläche zeichnen könnte, um die Geräte miteinander zu verbinden. Bin aber leider kein JavaScript Experte...

 

[Quaese]

Hi,

die Drag-Elemente müssen eine ID haben. Diese muss auch in das Array arrDragIDs eingetragen werden. Eine streng aufsteigende Reihenfolge ist jedoch nicht erforderlich.

Ciao
Quaese