PHPackages                             ssh521/laravel-draggable-modal - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. ssh521/laravel-draggable-modal

ActiveLibrary[Templating & Views](/categories/templating)

ssh521/laravel-draggable-modal
==============================

A Laravel package for draggable and resizable modal components with Alpine.js

1.0.6.0(7mo ago)012MITBladePHP ^8.2

Since Sep 30Pushed 7mo agoCompare

[ Source](https://github.com/ssh521/laravel-draggable-modal)[ Packagist](https://packagist.org/packages/ssh521/laravel-draggable-modal)[ RSS](/packages/ssh521-laravel-draggable-modal/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (4)Versions (14)Used By (0)

Laravel Draggable Modal
=======================

[](#laravel-draggable-modal)

A Laravel package that provides draggable and resizable modal components with Alpine.js support.

[![Multi draggable modal demo](./screenshot.png)](./screenshot.png)

Features
--------

[](#features)

- 🖱️ **Draggable Modals**: Click and drag modals to reposition them
- 📐 **Resizable**: Resize modals with drag handles
- 🎯 **Multiple Modal Support**: Open multiple modals simultaneously with z-index management
- 🎨 **Alert Modals**: Pre-styled alert modals with success, warning, error, and info variants
- 🎭 **Dark Mode Support**: Built-in dark mode styling
- ⚡ **Alpine.js Integration**: Seamless integration with Alpine.js
- 🎪 **Modal Triggers**: Simple component to trigger modals
- 📱 **Responsive**: Works on desktop and mobile devices

Requirements
------------

[](#requirements)

- PHP 8.2 or higher
- Laravel 11.0 or 12.0
- Alpine.js 3.x
- Tailwind CSS

Installation
------------

[](#installation)

설치와 설정의 전체 단계는 `INSTALL.md`를 참고하세요. README에서는 사용법만 다룹니다.

Usage
-----

[](#usage)

### Basic Draggable Modal

[](#basic-draggable-modal)

```

            Modal content goes here

```

### Multi-Modal Support

[](#multi-modal-support)

```

            First modal content

            Second modal content

```

### Alert Modal

[](#alert-modal)

```

```

### Modal Trigger Variants

[](#modal-trigger-variants)

```

```

Component Props
---------------

[](#component-props)

### Draggable Modal / Draggable Modal Multi

[](#draggable-modal--draggable-modal-multi)

PropTypeDefaultDescription`id`stringauto-generatedUnique identifier for the modal`title`string''Modal title displayed in header`width`int800Initial width in pixels`height`int600Initial height in pixels`minWidth`int300Minimum width in pixels`minHeight`int200Minimum height in pixels`initialX`int|nullnullInitial X position (centered if null)`initialY`int|nullnullInitial Y position (centered if null)`showCloseButton`booltrueShow close button in header`showResizeHandle`booltrueShow resize handle in corner`closeOnEscape`booltrueClose modal on ESC key`closeOnBackdropClick`boolfalseClose modal when clicking backdrop### Draggable Modal Alert

[](#draggable-modal-alert)

PropTypeDefaultDescription`id`stringauto-generatedUnique identifier for the modal`title`string'Alert'Alert title`message`string''Alert message`type`string'info'Alert type: info, success, warning, error`showCloseButton`booltrueShow close button`closeOnBackdropClick`boolfalseClose on backdrop click`closeOnEscape`booltrueClose on ESC key### Modal Trigger

[](#modal-trigger)

PropTypeDefaultDescription`text`string'Open Modal'Button/link text`modal-id`stringrequiredID of the modal to open`variant`string'primary'Style variant: primary, secondary, danger`type`string'button'Render as: button, link`modalType`string'multi'Modal type: multi, single, alertProgrammatic Control
--------------------

[](#programmatic-control)

You can also trigger modals programmatically using custom events:

```
// Open a modal
window.dispatchEvent(new CustomEvent('open-modal', {
    detail: { modalId: 'my-modal' }
}));

// Close a modal
window.dispatchEvent(new CustomEvent('close-modal', {
    detail: { modalId: 'my-modal' }
}));
```

> You can also open a modal by dispatching a DOM event from Blade or JS. The package registers listeners in `resources/js/draggable-modal/init.js`.

Livewire Integration
--------------------

[](#livewire-integration)

You can trigger modals from Livewire components:

```
// In your Livewire component
$this->dispatch('open-modal', modalId: 'user-edit-modal');
```

Customization
-------------

[](#customization)

### Customizing Views

[](#customizing-views)

After publishing the views, you can customize them in:

```
resources/views/draggable-modal/components/

```

### Customizing JavaScript

[](#customizing-javascript)

After publishing the JavaScript files, you can modify the behavior in:

```
resources/js/draggable-modal/

```

If you change file locations or names, update your imports accordingly and rebuild assets (`npm run build`).

### Routes: 샘플 라우트 비활성화 및 `web.php`에 직접 추가

[](#routes-샘플-라우트-비활성화-및-webphp에-직접-추가)

샘플 라우트 자동 로드를 끄고자 한다면 설정을 퍼블리시한 뒤 비활성화할 수 있습니다.

1. 설정 퍼블리시

```
php artisan vendor:publish --tag=draggable-modal-config
```

2. `.env` 또는 `config/draggable-modal.php`에서 비활성화

```
DRAGGABLE_MODAL_LOAD_SAMPLE_ROUTES=false
```

또는 `config/draggable-modal.php`에서

```
'load_sample_routes' => false,
```

3. `routes/web.php`에 직접 추가 예시

```
Route::prefix('draggable-modal')->as('draggable-modal.')->group(function () {
    Route::view('/sample/single', 'draggable-modal-sample-code.single-modal')->name('sample.single');
    Route::view('/sample/multi', 'draggable-modal-sample-code.multi-modal')->name('sample.multi');
    Route::view('/sample/alert', 'draggable-modal-sample-code.alert-modal')->name('sample.alert');
    Route::view('/sample/vite', 'draggable-modal-sample-code.vite-test')->name('sample.vite');
});
```

Troubleshooting
---------------

[](#troubleshooting)

설치/빌드 관련 문제는 `INSTALL.md`의 Troubleshooting 절을 확인하세요. 사용 중 동작 문제가 있다면 브라우저 콘솔 오류와 Alpine 초기화 여부를 우선 확인해 주세요.

Browser Support
---------------

[](#browser-support)

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

License
-------

[](#license)

This package is open-sourced software licensed under the [MIT license](LICENSE).

Credits
-------

[](#credits)

- [Philip Shin](https://github.com/philipshin)

Contributing
------------

[](#contributing)

Contributions are welcome! Please feel free to submit a Pull Request.

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance64

Regular maintenance activity

Popularity5

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

13

Last Release

221d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/a21e1dda7789158490e4a0290a83afce858fcc6fef473c962c0e57134243465a?d=identicon)[ssh521](/maintainers/ssh521)

---

Top Contributors

[![ssh521](https://avatars.githubusercontent.com/u/13602408?v=4)](https://github.com/ssh521 "ssh521 (14 commits)")

---

Tags

laravelbladecomponentmodalalpinealpinejsdraggable

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/ssh521-laravel-draggable-modal/health.svg)

```
[![Health](https://phpackages.com/badges/ssh521-laravel-draggable-modal/health.svg)](https://phpackages.com/packages/ssh521-laravel-draggable-modal)
```

###  Alternatives

[tightenco/jigsaw

Simple static sites with Laravel's Blade.

2.2k438.5k29](/packages/tightenco-jigsaw)[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k454.7k15](/packages/robsontenorio-mary)[victorybiz/laravel-simple-select

Laravel Simple Select inputs component for Blade and Livewire.

13721.1k](/packages/victorybiz-laravel-simple-select)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)