Alpine Mouse Drag Plugin

An Alpine.js plugin that adds a x-mousedrag directive for mouse and touch drag scrolling with inertia. The plugin allows you to easily add drag-to-scroll functionality to any scrollable element.

Features

Mouse drag scrolling for any element with overflow
Touch support for mobile devices
Smooth inertia effect with configurable friction
TypeScript support
Zero dependencies (except for Alpine.js)

Installation

# npm
npm install alpine-mousedrag-plugin

Usage

Module bundlers (Vite, Webpack, etc.)

import Alpine from 'alpinejs';
import AlpineMouseDragPlugin from 'alpine-mousedrag-plugin';

// Register the plugin
Alpine.plugin(AlpineMouseDragPlugin);

// Start Alpine
Alpine.start();

Usage in HTML

<div x-data x-mousedrag class="scrollable-element">
  <!-- Your scrollable content here -->
</div>

Modifiers

disableinertia: Use this modifier to disable the inertia effect.

<div x-data x-mousedrag.disableinertia class="scrollable-element">
  <!-- Your scrollable content here -->
</div>

Contributing

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

License

MIT

Package detail

alpine-mousedrag-plugin

readme