athul-suresh / filament-draggable-modal
A Filament plugin that adds draggable behavior to modal dialogs.
Package info
github.com/Athul-Suresh/filament-draggable-modal
pkg:composer/athul-suresh/filament-draggable-modal
Requires
- php: ^8.2
- filament/filament: ^4.0|^5.0
- illuminate/support: ^11.0|^12.0
Requires (Dev)
- laravel/pint: ^1.27
- orchestra/testbench: ^9.0|^10.0
- pestphp/pest: ^3.0
- pestphp/pest-plugin-laravel: ^3.0
README
A lightweight Filament plugin that adds draggable behavior to modal dialogs, enhancing user experience by allowing users to reposition modals anywhere on the screen.
Features
✨ Drag & Drop Modals - Click and drag modal headers to reposition them
🎯 Smart Boundaries - Modals stay within viewport bounds
⚡ Lightweight - Minimal JavaScript with no external dependencies
🎨 Seamless Integration - Works with all Filament modal types (Actions, Forms, Tables)
📱 Touch Support - Works on touch devices
🔧 Zero Configuration - Works out of the box after installation
Requirements
- PHP 8.2 or higher
- Filament 4.0 or 5.0
- Laravel 11.0 or 12.0
Installation
You can install the package via composer:
composer require athul-suresh/filament-draggable-modal
Usage
Basic Setup
Simply register the plugin in your Filament panel configuration:
use AthulSuresh\FilamentDraggableModal\FilamentDraggableModalPlugin; public function panel(Panel $panel): Panel { return $panel ->id('admin') ->plugins([ FilamentDraggableModalPlugin::make(), ]); }
That's it! All modals in your Filament panel are now draggable.
How It Works
Once installed, users can:
- Click on any modal header
- Drag the modal to a new position
- Release to drop it in place
The modal will remember its position during the session and automatically reset when closed.
Multiple Panels
The plugin works seamlessly with multiple panels:
// Admin Panel public function adminPanel(Panel $panel): Panel { return $panel ->id('admin') ->plugins([ FilamentDraggableModalPlugin::make(), ]); } // App Panel public function appPanel(Panel $panel): Panel { return $panel ->id('app') ->plugins([ FilamentDraggableModalPlugin::make(), ]); }
Compatibility
This plugin is compatible with all Filament modal types:
- Action Modals
- Form Modals
- Table Action Modals
- Custom Modals
- Slide-overs (when configured as modals)
Testing
Run the test suite with:
composer test
Run tests with coverage:
vendor/bin/pest --coverage
Format code with Laravel Pint:
composer format
Troubleshooting
Publish the assets if modals are not draggable after installation.
Inspired By
This plugin was inspired by the work of sanzgrapher. Special thanks for the inspiration and concept!
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Security
If you discover any security related issues, please email athulsuresh198@gmail.com instead of using the issue tracker.
Credits
- Athul Suresh
- Inspired by sanzgrapher
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
