Navigation und Werkzeuge verschiebbar machen

[TS]

Hello,

ich würde gerne für mein "Standardframe" (HTML-Standardseite mit Platzhaltern) die seitenbezogene Navigation und die Werkzeugbox (erscheint nur, wenn man die Seite bearbeiten darf) über den ganzen Viewport verschiebbar machen, selbstverständlich ohne und mit Mausunterstützung.

Brauche ich dafür unbedingt JavaScript, oder könnte ich das auch nur mittels CSS lösen? Ich kenne ja nun wahrhaftig noch nicht alle Tricks ;-)

Mit welchen Ideen könntet Ihr mich da auf den Weg schicken?

Welches HTML-Element sollte man für die Werkzeugbox zur Auszeichnung benutzen?

Liebe Grüße
Tom S.

[MrMurphy1]

Hallo

Wenn wir jetzt noch wüßten was du unter "verschiebbar" verstehst könnten wir dir vielleicht helfen.

Gruss

MrMurphy

[pl]

Wenn wir jetzt noch wüßten was du unter "verschiebbar" verstehst könnten wir dir vielleicht helfen.

Vielleicht meint er ja Drag & Drop ?

[TS]

Hello,

Wenn wir jetzt noch wüßten was du unter "verschiebbar" verstehst könnten wir dir vielleicht helfen.

So ähnlich, wie im Beispiel

Ich möchte aber, dass dam das auch mit der Tastatur machen kann, dass man die Container auch wieder verankern kann, damit sie wieder mir dem Dokument gescrollt werden können und wenn es mit HTM5 und CSS auch ohne JavaScript geht, wäre dies zu bevorzugen.

Liebe Grüße
Tom S.

[Henry]

Hallo Tom,

So ähnlich, wie im Beispiel

Ich möchte aber, dass dam das auch mit der Tastatur machen kann, dass man die Container auch wieder verankern kann, damit sie wieder mir dem Dokument gescrollt werden können und wenn es mit HTM5 und CSS auch ohne JavaScript geht, wäre dies zu bevorzugen.

Das Beispiel hat, bei mir zumindest, wieder so seine Probleme innerhalb des (ähm. wie nennt sich das nochmal Frickl?), also extern aufgerufen, funktionierts mit verankern und scrollen.

Wie meinst du das mit Tastatur, den Inhalt ansteuern?

Gruss
Henry

[Camping_RIDER]

Aloha ;)

Brauche ich dafür unbedingt JavaScript, oder könnte ich das auch nur mittels CSS lösen? Ich kenne ja nun wahrhaftig noch nicht alle Tricks ;-)

Eine Möglichkeit zum visuellen Verschieben von Elementen per CSS ist mir nicht bekannt. Das scheitert wohl schon an der „Zustandslosigkeit“ von CSS (nenn ich jetzt mal so) und der damit verbundenen Unmöglichkeit, eine neue Position irgendwie zu behalten selbst wenn das verschieben an sich irgendwie realisierbar wäre (und auch da sehe ich schon sehr große Fragezeichen).

Das ist definitiv eine Aufgabe für JavaScript und es gibt keinen Grund (vom Standpunkt des progressive enhancement) das anders zu lösen - ohne JavaScript kann man das Ding eben nicht verschieben (aber nach wie vor bedienen).

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

Als Ergänzung: selbst draggable bringt dir hier nix, weil du ja frei verschieben willst und nicht nur in bestimmte „drop zones“.

Grüße,

RIDER

[JürgenB]

Hallo Tom,

zur Anregung aus meiner Bastelkiste:

Hier kannst du ein Element mit der Maus frei bewegen: MausOMeter Das habe ich vor Jahren mal gebastelt, daher habe ich mich auch um Touchscreens nicht gekümmert. Aber auf dem iPhone kann der Kasten mit dem Blauen Rand oben auch verschoben werden. Ebenso auf einem FF unter Windows 10 mit Touchscreen. Der Edge wird bei einem Touchscreen nicht unterstützt.

Auf meiner aktuellen Baustelle siehst du, wie man mit den verschiedenen Techniken an die Maus- und Touch-Koordinaten kommt. Zum Testen must du mit der Maus oder mit zwei Fingern im Kasten ein Rechteck aufziehen. Hier fehlt (neben diversen Aufräumarbeiten und Feintuning) noch der Test unter Android.

Gruß
Jürgen