Drag & Resize

[drsoong]

Hallo,

ich versuche gerade ein Element draggable und resizable zu machen.

Das Element ist nebenbei bemerkt ein div, in dem ein iFrame ist, der wiederum dynamisch Vorschauen liefert auf vom User ausgewählten Dateien.

Womit würdet Ihr das machen?

Mir wäre an einer Lösung gelegen, die

- mit einer Codezeile auskommt. (vlt. so: $('meinElement').draggable().resizable() wie in jQ ui)
- aus einer Javascript-Datei zum einbinden besteht
- den Konflikt zwischen drag Mouse/Touch-Events und resize Mouse/Touch-Events perse löst
- die performant beim Draggen ist
- die Mouse und Touch unterstützt

Habe es schon probiert mit jQuery UI. Da fehlt "touch", die Lösung ruckelt beim draggen und resizable geht gar nicht.

Ansonsten habe ich noch probiert https://anseki.github.io/plain-draggable/ in Kombination mit CSS resize:both

Diese Lösung schaltet mir dann aber die default Events ab, die CSS resize wohl benötigt.

Na ja, habe noch diverse andere Sachen probiert...

Bevor ich jetzt aber da voll einsteige und schaue, wie ich den Fremdcode zurechtbiege, frage ich erst mal, ob jemand was Einfaches kennt.

[tomBuilder]

schon damit probiert:
https://interactjs.io/

[drsoong]

schon damit probiert:
https://interactjs.io/

Vielen Dank.

Habe ich gerade gemacht. Das Ganze war allerdings eher eine ernüchternde Erfahrung.

1) Habe erst mal node.js + npm installiert, dann ging erst mal das "Gezackere" los mit dieser package.json Datei. Bei composer legt der sich so eine Datei selber an
2) Dann fiel mir auf, dass es da auch einen Direkt-Link zur Distribution ...min.js gibt (jsdelivr)
3) Während es bei jQuery UI reicht einem Element ein .draggable() anzuhängen, muss man sich bei interact erst mal einen dragMoveListener schreiben. Das ist echt Käse.

Auch, wenn das Beispiel auf deren Landing Page genau das ist, was ich suche, habe ich im Moment zumindest keine Lust mich da endlos einzuarbeiten.

Ist im Moment nicht mehr als ein "Nice-To-Have".

Na ja, ich lese gerade noch in der Doku:

Note that interact.js doesn't move elements for you. Styling an element so that it moves while a drag happens has to be done from your own event listeners. This way, you’re in control of everything that happens.

Das erklärt es. Ist aber dann nicht mein Ding.

[tomBuilder]

Sry, möglicherweise ist subjx was Du suchst.

[drsoong]

Nochmal vielen Dank an Dich. Diese Lösung ist schon etwas "besser"...

Jetzt ist mir gerade aber aufgefallen, dass es eine viel bessere und performantere Lösung für mich gibt. Ich will ja, wie gesagt, eine Vorschau auf hoch geladene Dokumente, Bilder etc bieten, die verschiebbar ist und deren Größe man verändern kann.

Das geht sehr gut mit dem guten, alten window.open. Da es sich um ein firmeninternes Tool handelt, wird es auch keine Probleme mit PopUp-Blockern geben.

Zudem ist es so, dass die draggable/resizable Lösung im DIV mit iFrame vor allem dann schwer zu ruckeln anfängt, wenn im iFrame ein PDF-Plugin geladen wird....