How to Make Filament Modal Draggable?

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>