draggable-resizable-vue3

Introduction

This is Vue 3 (Composition API) library for draggable and resizable elements with custom grid.

Initially, this is a fork of the Vue 2 library vue-draggable-resizable. Now it is being developed independently from the source.

Features

• Vue 3 (Composition API).
• No dependencies.
• Lightweight (36.2 KB without minification).
• Use draggable, resizable or both.
• Define handles for resizing or use borders.
• Restrict size and movement to parent any element.
• Snap element to custom grid.
• Restrict drag to vertical or horizontal axis.
• Maintain aspect ratio.
• Touch enabled.
• Use your own classes.
• Provide your own markup for handles.
• Toggle active state while hovering.
• Showing parent grid using prop or component.
• Styling using slots or custom styles.

Installation

$ npm install draggable-resizable-vue3

---

Register (DraggableResizableVue and DraggableResizableContainer components) globally:

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import DraggableResizableVue from 'draggable-resizable-vue3'

const app = createApp(App)

app.use(DraggableResizableVue)

app.mount('#app')

Register locally (composition API):

<script setup>
import DraggableResizableVue from 'draggable-resizable-vue3'
</script>

Register locally with the container component:

<script setup>
import {
  DraggableResizableVue,
  DraggableResizableContainer,
} from 'draggable-resizable-vue3'
</script>

Basic usage

Check an example of this type of usage here.

<template>
  <draggable-resizable-vue
    v-model:x="element.x"
    v-model:y="element.y"
    v-model:h="element.height"
    v-model:w="element.width"
    v-model:active="element.isActive"
  />
</template>

<script setup>
import { ref } from 'vue'
import DraggableResizableVue from 'draggable-resizable-vue3'

const element = ref({
  x: 20,
  y: 20,
  width: 200,
  height: 200,
  isActive: false,
})
</script>

For advanced usage check examples.