@vuedrop/core

Drag and Drop supremacy starts here!

Beta — the API may still change before a stable 1.0 release.

Install

npm install @vuedrop/core

pnpm add @vuedrop/core

Usage

<script setup lang="ts">
import { useTemplateRef } from "vue";
import { useDraggable } from "@vuedrop/core";

const elRef = useTemplateRef("el");

const { style, isDragging } = useDraggable(elRef, {
  filter: () => false, // no elements are excluded from dragging
});
</script>

<template>
  <div ref="el" :style="style" :class="{ dragging: isDragging }">Drag me</div>
</template>

useDraggable returns:

| Property | Type | Description | | ------------ | -------------------------- | ------------------------------------------------- | | x, y | Ref<number> | Current position | | position | Ref<{ x, y }> (readonly) | Current position as a single object | | isDragging | ComputedRef<boolean> | Whether the element is currently being dragged | | style | ComputedRef<string> | CSS left/top string for :style binding | | translate | ComputedRef<string> | CSS translate string, for GPU-accelerated moves |

Options

| Option | Type | Default | | -------------------------- | ------------------------------------------------------------- | -------- | | filter | (el: EventTarget) => boolean (required) | — | | axis | 'x' \| 'y' \| 'both' | 'both' | | dragHandle | element ref/getter — element that starts the drag | target | | initialPosition | { x: number, y: number } | — | | snap | number — snaps position to a grid of this size, in pixels | 1 | | container | element ref/getter — bounds the draggable within this element | — | | limitToContainer | boolean | true | | onStart/onMove/onEnd | (position, event) => void lifecycle callbacks | — |

See the monorepo README for development setup and the full project roadmap.

Companion packages @vuedrop/components, @vuedrop/list, and @vuedrop/grid are planned.

License

Apache-2.0