Archiv der Kategorie: Directive

AngularJs Draggable Direktive für UI-Bootstrap Modal in TypeScript


In meinen aktuellen AngularJs Projekten verwende ich für das Layout meist Bootstrap und für die JavaScript Umsetzung der Komponenten dann entsprechend UI-Bootstrap. Seit einiger Zeit wird das Projekt auch wieder aktiv weiterentwickelt. Leider werden die Komponenten sehr “einfach” gehalten und setzen nur die Funktionalität um die auch das klassische Bootstrap bietet. Es gibt noch weitere Komponentenanbieter für Bootstrap, wie z.B. AngularStrap wo mehr Zeit auch in zusätzliche Features investiert wurde, nur leider wird das Repo aktuell nicht mehr so regelmäßig aktualisiert.

Daher versuche ich aktuell vermehrt auf UI-Bootstrap zu setzen und habe hier eine einfache Direktive erstellt, mit der das Standard Modal Draggable wird. Dafür muss man einfach den Mauszeiger im Header des Modals gedrückt halten und man kann das Modal verschieben. Die Direktive muss dabei nur in AngularJs registriert werden, denn sie hängt sich automatisch an eine bestehende Modal CSS Klasse “modal-dialog” und damit sind alle Modals verschiebbar, wenn die Direktive einmal registriert wurde.

Der passende TypeScript Code zum Draggable Modal