vnphanquang / svelte-action-movable

Action to move node on mousedown & mousemove

Svelte Action - use:movable

This package has been moved to the @svelte-put monorepo. You can still use this package as is but a reinstallation is recommended.

# remove svelte-movable from your package.json

npm install -D @svelte-put/movable
yarn add -D @svelte-put/movable
pnpm add -D @svelte-put/movable

Table of Contents

Show / hide

• Svelte Action - use:movable
  • Table of Contents
  • Changelog
  • Installation
  • Usage
  • Documentation
    • Typescript support
  • Contributing
  • Todos

Changelog

Installation

npm install -D svelte-movable
yarn add -D svelte-movable
pnpm add -D svelte-movable

Usage

See example for typical usage here.

Documentation

Typescript support

app.d.ts: show / hide

/// <reference types="@sveltejs/kit" />
/// <reference types="svelte" />

// Typescript support in svelte-kit, see
// https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-using-an-attributeevent-on-a-dom-element-and-it-throws-a-type-error

declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    // on:movablestart
    onmovablestart?: (event: CustomEvent<import('svelte-movable').MovableEventDetails>) => void;
    // on:movableend
    onmovableend?: (event: CustomEvent<import('svelte-movable').MovableEventDetails>) => void;
  }
}

For detailed documentation, see the extracted API.

Quick access to the parameter interface accepted by the action: MovableParameters.

Note: MovableParameters has properties that are all optional. By default you don't need to provide any parameter to the action.

Contributing

Read Contribution Guide

Todos

• separate helper methods & implement unit tests

• add field test for svelte kit (integration)

• CI workflow (github action)