Vue component which can be moved around and resized

Table of Contents

• Live Playground
• Install and basic usage
  • Props
  • Events
  • Expose
• Contributing
• License

Install and basic usage

Install

$ npm install vue-drag-and-resize

Register the component globally

// main.js
import { createApp } from 'vue'
import 'vue-drag-and-resize/vue-drag-and-resize.css'
import VueDragAndResize from 'vue-drag-and-resize'
import App from './App.vue'

const app = createApp(App)
app.component('VueDragAndResize', VueDragAndResize)
app.mount('#app')

Register the component locally

<script setup lang="ts">
import VueDragAndResize from 'vue-drag-and-resize'
</script>

<template>
  <VueDragAndResize :width="200" :height="200">
</template>

<style scoped>
@import 'vue-drag-and-resize/vue-drag-and-resize.css';
</style>

Live Playground

For examples of the component go to the live playground

Props

alwaysOnTop

Type: Boolean Required: false Default: true

Components with AlwaysOnTop set to true will be brought to top (z-index set to 99999) when interacted with. Others with AlwaysOnTop will then have their z-index adjusted to keep order.

<VueDragAndResize :always-on-top="true"></VueDragAndResize>

buttomGutter

Type: Number Required: false Default: 0

The distance (in px) from the bottom of the parent that the component can go.

<VueDragAndResize :buttom-gutter="20"></VueDragAndResize>

dragDirections

Type: Array<String> Required: false Default: ['x', 'y'] Options: x, y

The directions in which the component and be moved.

<VueDragAndResize :drag-directions="['x','y']"></VueDragAndResize>

draggable

Type: Boolean Required: false Default: true

If the component is draggable

<VueDragAndResize :draggable="true"></VueDragAndResize>

dragOn

Type: string Required: false Default: ``

CSS selector for the element within the component to drag on. Defaults to '', or the component itself.

<VueDragAndResize :dragOn="#ElemDiv"></VueDragAndResize>

grabWidth

Type: Number Required: false Default: 0

The buffer from the edge where a grab resize grab can happen (in px)

<VueDragAndResize :grab-width="5"></VueDragAndResize>

height

Type: Number Required: false Default: -1

The starting height of the component (in px). A value of -1 will cause a calculation based on 'auto'

<VueDragAndResize :height="250"></VueDragAndResize>

left

Type: Number Required: false Default: '0'

The starting left position of the component (in px).

<VueDragAndResize :left="250"></VueDragAndResize>

leftGutter

Type: Number Required: false Default: 0

The distance (in px) from the left of the parent that the component can go.

<VueDragAndResize :left-gutter="20"></VueDragAndResize>

position

Type: String Required: false Default: absolute Options: absolute, relative

The CSS position mode for the component. If absolute, and nested in another VueDragAndResize, it will still be bound by the parents borders

<VueDragAndResize :position="absolute"></VueDragAndResize>

resizeable

Type: Boolean Required: false Default: true

If the component is resizeable.

<VueDragAndResize :resizable="true"></VueDragAndResize>

resizeDirections

Type: Array<String> Required: false Default: ['l', 'r', 'u', 'd', 'ul', 'ur', 'dl', 'dr'] Options: 'l', 'r', 'u', 'd', 'ul', 'ur', 'dl', 'dr'

The directions in which the component and be resized.

<VueDragAndResize :resize-directions="['l', 'r', 'u', 'd', 'ul', 'ur', 'dl', 'dr']"></VueDragAndResize>

rightGutter

Type: Number Required: false Default: 0

The distance (in px) from the right of the parent that the component can go.

<VueDragAndResize :right-gutter="20"></VueDragAndResize>

top

Type: Number Required: false Default: '0'

The starting top position of the component (in px).

<VueDragAndResize :top="250"></VueDragAndResize>

topGutter

Type: Number Required: false Default: 0

The distance (in px) from the top of the parent that the component can go.

<VueDragAndResize :top-gutter="20"></VueDragAndResize>

width

Type: Number Required: false Default: -1

The starting width of the component (in px). A value of -1 will cause a calculation based on 'auto'

<VueDragAndResize :width="250"></VueDragAndResize>

Events

dragging

Response

{
    start: {
        x: Number,
        y: number
    },
    end: {
        x: Number,
        y: number
    }
}

Called whenever the component starts being dragged.

<VueDragAndResize @dragging="onDragging">

drag-start

Called whenever the component gets dragged.

<VueDragAndResize @drag-start="onDragStart">

drag-end

Called whenever the component finishes being dragged.

<VueDragAndResize @drag-end="onDragEnd">

resizing

Response

{
    start: {
        x: Number,
        y: number
    },
    end: {
        x: Number,
        y: number
    }
}

Called whenever the component starts being dragged.

<VueDragAndResize @resizing="onResizing">

resize-start

Called whenever the component gets dragged.

<VueDragAndResize @resize-start="onResizeStart">

resize-end

Called whenever the component finishes being dragged.

<VueDragAndResize @resize-end="onResizeEnd">

License

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