Wie man eine Draggable-Schnittstelle in CSS3 erstellt

Wie man eine Draggable-Schnittstelle in CSS3 erstellt - dummies

Manchmal muss ein Benutzer Bildschirmelemente neu positionieren, damit sie leichter zu sehen oder zu bearbeiten sind. In CSS3 muss das Erstellen einer Umgebung, in der der Benutzer Elemente verschieben kann, nicht das Schreiben von Codehäufen erfordern. Tatsächlich benötigen Sie nur eine einzige Methode namens draggable ().

Der folgende Code zeigt die Methode zum Erstellen eines ziehbaren Absatzes in diesem Beispiel. (Den vollständigen Code für dieses Beispiel finden Sie im Kapitel 06Interactions-Ordner des herunterladbaren Codes als DragContent. HTML.)

 $ (function () {$ ("# MoveMe"). Draggable ();}); 

Dieser Code ist interessant, weil er tatsächlich eine anonyme jQuery-Funktion erstellt, die die jQuery-Umgebung erweitert, anstatt mit einem bestimmten Seitenfeature zu arbeiten.

Der Fokus dieses Aufrufs ist ein Absatz (

-Tag) mit einer ID von MoveMe. Sie müssen nur auf dieses Element zugreifen und draggable () aufrufen, damit es sich bewegt. Probieren Sie das herunterladbare Beispiel aus und Sie können den Absatz an eine beliebige Stelle auf der Seite verschieben.

Um eine bewegliche Box zu erstellen, benötigt dieses Beispiel einen benutzerdefinierten Stil. Der Stil erstellt einen Rahmen, lässt viel Platz für den Text und zentriert den Text sowohl horizontal als auch vertikal. Hier ist der für dieses Beispiel verwendete Stil:

 #MoveMe {border: solid; Breite: 200px; Höhe: 5em; Textausrichtung: Mitte; line-height: 5em;} 

Viele Entwickler haben Probleme, Text in einem

-Tag vertikal zu zentrieren. Sie können eine Reihe von Möglichkeiten finden, diese Aufgabe auszuführen. Eine der einfachsten Möglichkeiten, die Aufgabe plattform- und browser-konsistent zu erledigen, besteht jedoch darin, den Zeilenhöhe-Stil wie im Beispiel zu verwenden.

Der Trick besteht jedoch darin, die Stile für Höhe und Linienhöhe auf denselben Wert zu setzen - der Text wird immer in der Mitte angezeigt.