Quickly make elements draggable with AlpineJS

Developer Experience

If you already have AlpineJS and GSAP (Greensock) on a project and need a solution for making elements draggable, consider wrapping Greensock within an Alpine directive:

Alpine.directive("draggable", (el, { modifiers }) => {
    // x-draggable || x-draggable.rotate || x-draggable.contain

    const draggableTypes = {
        rotate: "rotation",
    }

    Draggable.create(el, {
        type: modifiers ? draggableTypes[modifiers] : "x,y",
        bounds: modifiers.includes("contain") ? el.closest(".draggable") : null,
    });
});