vue3-drag-zoom

Drag & Zoom toolkit for Vue 3

Features

• Make element draggable and zoomable simply
• Out of the box Drag & Zoom components
• Provides powerful container components
• Hooks and directives are supported
• Reactive properties
• Written in Typescript

Demo

Installation

npm i vue3-drag-zoom

Basic Usage

Register the component

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VueDragZoom from 'vue3-drag-zoom'

createApp(App).use(VueDragZoom).mount('#app')

Use components or directives in your code

<script setup lang="ts">
import { ref } from 'vue'
const transform = ref({ x: 100, y: 100, scale: 1 })
</script>

<template>
  <drag-zoom-item v-model="transform">
    <div class="wrapped-block">
      Drag me! I am at {{ transform.x }}, {{ transform.y }}
    </div>
  </drag-zoom-item>
</template>

Use directives in a simple scene, do not use them with Vue list rendering, do not use them in DragZoomContainer component too.

<script setup lang="ts">
import { ref } from 'vue'
const transform = ref({ x: 100, y: 100, scale: 1 })
</script>

<template>
  <div v-drag="transform">
    Drag me! I am at {{ transform.x }}, {{ transform.y }}
  </div>
</template>

Hooks must be imported manually, you can customize your custom components by setting the hooks option.

<script setup lang="ts">
import { ref } from 'vue'
import { useDrag } from 'vue3-drag-zoom'

const transform = ref({ x: 100, y: 100, scale: 1 })

const el = ref()
const { style } = useDrag(el, transform, {
  onDragStart: (pos) => console.log(`drag start at ${pos,x}, ${pos.y}`),
  onDragEnd: (pos) => console.log(`drag end at ${pos.x}, ${pos.y}`)
})
</script>

<template>
  <div ref="el" :style="style">
    Drag me! I am at {{ transform.x }}, {{ transform.y }}
  </div>
</template>

Documentation

• Components
  • DragZoomItem.md
  • DragZoomContainer.md
• Hooks
  • useDrag
  • useDragZoom

License

The MIT License (MIT). Please see License File for more information.