Drag'n'drop mit JavaScript

[ingobar]

Hallo zusammen,

nach längerer Programmierabstinenz im Bereich JavaScript (5 Jahre) muss/will ich ma wieder ein Projekt mit mit Schwerpunkt JS umsetzen. Das Ganze soll eine Browser-App werden in der verschiedene Elemente per Klick im Browserfenster erzeugt werden und dann per Mausklick verschoben werden sollen.

Ich wollte das Ganze mit einem an die Fenstergröße angepassten <canvas> umsetzen, den Mausklick abfangen und an der Stelle das Objekt erzeugen. Klickt man mit der linken Maustaste auf ein Element so kann man es verschieben. Doppelklickt man auf ein Element bekommt man ein Kontextmenü (<div>) angezeigt und kann die Attribute bearbeiten.

Da das ja nun keine weltbewegend neue Art der Interaktion ist, wollte ich mal fragen, ob hier jemand eine Resource/Library/Internetseite oder sonstwas kennt, die ich benutzen kann, um nicht wieder bei Adam&Eva anzufangen und das Rad neu zu erfinden.

Viele Grüße Ingo

[Gunnar Bittersmann]

@@ingobar

in der verschiedene Elemente per Klick im Browserfenster erzeugt werden und dann per Mausklick verschoben werden sollen.

Ich wollte das Ganze mit einem an die Fenstergröße angepassten <canvas> umsetzen

Dann müsstest du ja bei jeder Bewegung mit entsprechender Framerate von min. 60fps den gesamten Canvas immer wieder neu zeichnen.

Wäre es nicht sinnvoller, die verschiedenen Grafik-Elemente als DOM-Elemente zu generieren (SVG?) und durch Änderung der CSS-Eigenschaft transform (transition) einzeln über den Bildschirm zu bewegen?

LLAP 🖖

[ingobar]

Hallo,

da ich nicht HTML-Elemente ziehen wollte, dachte ich eher an das canvas. Vielleicht so wie hier.

An SVG hatte ich jetzt gar nicht gedacht - lebt das noch im Netz? Ich dachte, dass ist längst tot.

Was wäre denn in Bezug auf Tablets, Smartphones und so besser?

Gefunden habe ich in der Zwischenzeit dies.

Viele Grüße Ingo
PS: Es geht mir um Kreise und Rechtecke, um Graphen/Maps zu zeichnen.

[Camping_RIDER]

Aloha ;)

An SVG hatte ich jetzt gar nicht gedacht - lebt das noch im Netz? Ich dachte, dass ist längst tot.

Im Gegenteil, das ist lebendig wie noch nie, inzwischen mit nativer Unterstützung in allen (relevanten) Browsern.

Grüße,

RIDER

[ingobar]

SVG, okay. Mein letzter Stand ist dann doch ein paar Jahre alt. Ich schau mal, was ich zum Thema SVG so finde und in wie weit man damit Drag'n'Drop und ähnliches machen kann.

Danke für den Hinweis.

Ingo

[Camping_RIDER]

Aloha ;)

SVG, okay. Mein letzter Stand ist dann doch ein paar Jahre alt. Ich schau mal, was ich zum Thema SVG so finde und in wie weit man damit Drag'n'Drop und ähnliches machen kann.

Drag'n'Drop ist in dem Sinne keine spezielle Eigenschaft von SVG, sondern eine, die seit HTML5 für im Prinzip alle Elemente ganz unkompliziert möglich ist. SVG war im Sinne von @Gunnar Bittersmann dafür gedacht, die möglicherweise sehr variablen Grafikelemente, die du eventuell benötigst (aus welchem anderen Grund hättest du Canvas nutzen wollen?) zu erzeugen, die dann entweder als Bildelement aus einer Datei oder direkt als svg-Element mit Drag'n'Drop manipulieren kannst.

Zwar kann man auch innerhalb SVG theoretisch drag'n'drop benutzen, es ging aber ja vor allem darum, massive Performance-Vorteile gegenüber der canvas-Neuzeichnerei zu bekommen, daher wäre das wieder irgendwie am Thema vorbei. Daher meine Nachfrage hier nochmal, nachdem ich das davor offenbar überlesen hatte: Warum genau willst du keine HTML-Elemente ziehen? Vielleicht bist du ja vor allem mit dieser Einschätzung auf dem Holzweg...

@Edit:

Solltest du tatsächlich Drag-and-Drop manuell lösen wollen, findest du auch das im Wiki, sogar für SVG. Und da stellt sich mir die Anschlussfrage, warum du nicht gleich im Wiki nach Drag and Drop gesucht hast :P

Grüße,

RIDER