svelte-action-movable Svelte Themes

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

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)


buy vnphanquang a coffee

Top categories

Loading Svelte Themes