Grafik ziehen und verschieben
Eine Spielerei die ich mal für jemanden in einem Forum (Hier der Link zum Thread) gemacht habe. Weil's so toll aussieht mach ich's mal öffentlich. Wie das Skript eingesetzt werden kann, muss sich jeder selbst überlegen.
Quellcode
Und hier der Quellcode, ich hab den nur im Firefox und IE getestet. Um ihn zu nutzen muss er in eine Seite kopiert werden und die Elemente die verschoben werden sollen müssen eine ID haben, die img enthält. Damit sie sich verschieben lassen müssen sie die Eigenschaft position:absolute haben
ähnliche Artikel
- 3. Juli 2006 -- Drag & Drop m. Javascript (5)
Ein einfaches Drag & Drop Beispiel
- 18. November 2011 -- LED Editor (1)
LED Scroller Chareditor Dieses Skript dient zum...
- 13. Mai 2009 -- String Erweiterungen (5)
Eine der Eigenschaften von Javascript, die sie von...
Comments (27)
5087 mal gelesen.
5087 mal gelesen.
27 Kommentare
Leave a comment »
Seiten:
18. Januar 2006: 17:28
naja, trotz Deines Tests mit Firefox funzt das Skript mit meiner fuchs nicht. Hab Version 1.5 vielleicht liegts daran – kann ich mir aber nicht vorstellen. Wenn Du weist warum, kannst Du mir ja bescheid geben.
18. Januar 2006: 19:08
Kann ich nicht bestätigen, ich hab ebenfalls 1.5 und es klappt Problemlos. Übrigens auch im Opera 7 (mit kleinen Einschränkungen)
20. Juni 2007: 16:59
Bei mir funktioniert es online, aber offline nicht..? Habe ich es wohl möglich nicht korekt eingebunden? Wie hast du es gemacht?
22. Juni 2007: 19:26
Lag an ner lokalen sache, funktioniert jetzt soweit einwandfrei. Jedoch wird jedes element beim anklicken grundsätzlich sofort um nen px vergrössert, egal ob man es nun einfach anklickt, verschiebt, oder resized.
22. Juni 2007: 21:01
Ok funktioniert nun einwandfrei, lag an ner unglücklichen css kombination
22. Juni 2008: 12:11
Wirklich genial – Herzlichen Dank!
28. Januar 2009: 12:34
Klasse Script.
Ich hätte dazu aber eine frage.
Ist es auch möglich dieses Script auf ein Div anzuwenden?
28. Januar 2009: 17:50
Ja, kein Problem, es muss nur positioniert sein
4. Februar 2009: 11:50
Eine Frage zu dem Script hätte ich noch.
Wie muß das Script verändert werden, wenn ich nur die funktion zum größe-anpassen nutzen möchte. Ich versuche schon seit tagen dies zu lösen. Ich finde keinen einstieg.
4. November 2009: 22:54
Hi,
Respekt !!!
ich würde gern die „nur“ das Verschieben nutzen, und das Strecken abschalten.
Wie mache ich das ?
5. November 2009: 13:40
Du meinst Drag&Drop?
http://javascript.jstruebig.de/javascript/67/
14. Mai 2010: 17:07
Hi,
gelungene Sache, dieses Script. Ich arbeite zur Zeit auch an einer etwas speziellen Webanwendung. Es ist eine Navigation über eine Fläche durch bloßes Ziehen der Fläche, so wie man es google-maps gewohnt ist. Das Script funktioniert soweit, ich habe nur ein Problem: die „Fläche“ wird durch Bilder aufgebaut. Wenn ich nun mit der Maus die Fläche greifen und ziehen will, kommt mir die Drag&Drop-Funktion des Browsers dazwischen; statt über mein Script die Fläche zu greifen, greife ich einzelne Bild. Auf diese Weise wird das Mausereignis immer wieder abgefangen und kann von meinem Script nicht richtig verarbeitet werden. Lässt sich das irgendwie vermeiden? Wieso kommt dir diese Funktion bei deinem Script nicht in die Quere? Ich wäre froh, wenn du mir helfen könntest…
Grüße, thomst
15. Mai 2010: 10:20
ok. Ich habe mir dein Script noch mal genauer angeschaut und bin nun selbst drauf gekommen. Hat sich also erledigt. Jedenfalls besten Dank für das feine Script!
15. Mai 2010: 12:40
In dem Skript hier, ist es das return false in den Mauseventfunktionen. Zusätzlich kann es notwendig sein, ein event.preventDefault() aufzurufen.
28. April 2011: 13:14
es funktioniert in allen Browsern (FF, MISE, Safari, Opera) nur NICHT im Chrom`!!
woran kann das liegen?
28. April 2011: 13:46
Kann ich leider mangels Chrome nicht sagen.
21. Oktober 2011: 14:21
Ist ein sehr cooles Script. Hab nur bemerkt, wenn ich auf die Grafik klicke wird sie jedesmal ein Stück größer gemacht, woran kann das liegen???
22. Oktober 2011: 13:31
Hier auf der Seite? Ich hab’s grad mal mit Firefox getestet, da ist das nicht so.
27. November 2011: 18:23
Hallo, sehr gutes Script, wie binde ich das mit einer image ein, das es auch mit userscripts läuft?
also greasemonkey kompatibel zu machen??
bitte mal beschreiben, was ich ändern muss und wo ich die img Datei einbinden muss!!
26. März 2012: 8:38
Ein tolles Script, das bei mir in fast allen Browsern problemlos laeuft.
Einzig im WIN Firefox 11.0 und WIN Opera bewegt sich nichts, ebenso bei dieser Seite.
Gibt es eine Loesung? Danke!
26. März 2012: 14:58
Ich hab‘ kein Windows mehr, aber unter Linux funktioniert es mit Opera, Firefox, Chromium und dem Webkit Browser. Insofern kann ich nicht sagen, warum es bei dir nicht funktioniert. Gibt es eine Fehlermeldung?
26. März 2012: 16:57
Das Bild verhaelt sich wie ein „normales“ Bild. Die Maussymbole werden bei mouseover angezeigt, aber es wird keine Veraenderung ausgefuehrt. Haben noch andere dieses Problem_
26. März 2012: 17:07
Guck doch mal in die Fehlerkonsole, ich kann mir nicht vorstellen, dass es dort keine Meldung gibt
26. März 2012: 20:10
einig eine Warnung:
Das nodeValue-Attribut auf Attributen sollte nicht mehr verwendet werden. Verwenden Sie value stattdessen.
Der FF laeuft auf Vista und Parallels Desktop. Aber daran sollte es doch nicht liegen. Werde nochmal auf einem anderen System testen.
26. März 2012: 20:53
Hallo Struppi,
gerade im FF 11 unter Windows 7 getestet. Es funktioniert.
Gruß
Jürgen
27. März 2012: 7:18
Ich habe auf drei anderen Systemen getestet, dort funktioniert es problemlos. Pardon fuer die Aufregung. Bei mir haengt es allerdings weiterhin.
27. März 2012: 8:44
Wenn keine Meldung in der Fehlerkonsole steht und es bei allen anderen funktioniert, ist bei deinem System irgendetwas kaputt. Haste mal versucht mit Firebug zu debuggen?
Das Neuste
Kategorien
am meisten gelesen
zuletzt kommentiert
Archiv
Wortwolke
Tool Drag&Drop Firefox google about:config Laufschrift Wordpress String überwachung Animation linux Datenschutz Browser Bugs Privatsphäre prototype LED Scroller Javascript OOP LED