F
Filament•2w ago
Marco Mapelli

How to Make Filament Modal Draggable?

Hey everyone! 👋 I'm trying to make the Filament modal draggable, so users can move it around freely. I attempted to use Alpine.js to manipulate .fi-modal, but it doesn't seem to work properly. The modal resets its position, and dragging doesn’t behave as expected. Here’s what I tried: 
Copia
Modifica
<div x-data="{ isDragging: false, x: 0, y: 0, offsetX: 0, offsetY: 0 }"
     x-init="
        let modal = $el.closest('.fi-modal');
        let header = modal.querySelector('.fi-modal-header');

        modal.style.position = 'absolute';
        modal.style.left = '50%';
        modal.style.top = '20%';
        modal.style.transform = 'translate(-50%, -20%)';
        
        header.addEventListener('mousedown', (e) => {
            isDragging = true;
            offsetX = e.clientX - modal.getBoundingClientRect().left;
            offsetY = e.clientY - modal.getBoundingClientRect().top;
        });

        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                modal.style.left = `${e.clientX - offsetX}px`;
                modal.style.top = `${e.clientY - offsetY}px`;
                modal.style.transform = 'none';
            }
        });

        document.addEventListener('mouseup', () => isDragging = false);
    ">

    <p class="p-4">You can drag this modal by clicking on its header.</p>

</div>
Copia
Modifica
<div x-data="{ isDragging: false, x: 0, y: 0, offsetX: 0, offsetY: 0 }"
     x-init="
        let modal = $el.closest('.fi-modal');
        let header = modal.querySelector('.fi-modal-header');

        modal.style.position = 'absolute';
        modal.style.left = '50%';
        modal.style.top = '20%';
        modal.style.transform = 'translate(-50%, -20%)';
        
        header.addEventListener('mousedown', (e) => {
            isDragging = true;
            offsetX = e.clientX - modal.getBoundingClientRect().left;
            offsetY = e.clientY - modal.getBoundingClientRect().top;
        });

        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                modal.style.left = `${e.clientX - offsetX}px`;
                modal.style.top = `${e.clientY - offsetY}px`;
                modal.style.transform = 'none';
            }
        });

        document.addEventListener('mouseup', () => isDragging = false);
    ">

    <p class="p-4">You can drag this modal by clicking on its header.</p>

</div>
However, the modal doesn't stay in place and sometimes snaps back. Is there a better way to make Filament’s modal draggable while maintaining compatibility with its system? Any help or insights would be greatly appreciated! Thanks in advance! 🙌
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?