vue3-draggable-resizable

To enable automatic snapping/alignment between multiple Vue3DraggableResizable elements, wrap them in a DraggableContainer. This feature provides real-time reference lines when elements snap to specific axes or parent edges.

Note: If you registered the library globally via app.use(), DraggableContainer is already globally registered and does not need to be imported again.

<template>
  <div class="parent">
    <DraggableContainer>
      <Vue3DraggableResizable>
        Test
      </Vue3DraggableResizable>
      <Vue3DraggableResizable>
        Another test
      </Vue3DraggableResizable>
    </DraggableContainer>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Vue3DraggableResizable, { DraggableContainer } from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

export default defineComponent({
  components: { Vue3DraggableResizable, DraggableContainer }
})
</script>

Adsorption alignment allows multiple Vue3DraggableResizable components to snap to specific guides or to each other. To use this feature, wrap your draggable components in a DraggableContainer.

Note: If you used app.use(Vue3DraggableResizable), DraggableContainer is available globally. Otherwise, you must import it explicitly from vue3-draggable-resizable.

<template>
  <div id="app">
    <div class="parent">
      <DraggableContainer>
        <Vue3DraggableResizable>
          Test
        </Vue3DraggableResizable>
        <Vue3DraggableResizable>
          Another test
        </Vue3DraggableResizable>
      </DraggableContainer>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Vue3DraggableResizable, { DraggableContainer } from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

export default defineComponent({
  components: { Vue3DraggableResizable, DraggableContainer }
})
</script>

You can register the component globally in your main entry file or import it locally within specific components. In both cases, you must import the default CSS file.

Global Registration: Register using the .use() method on your Vue app instance.

Local Registration: Import Vue3DraggableResizable and add it to the components option of your component.

// Global Registration in main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

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

// Local Registration in component.js
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

export default defineComponent({
  components: { Vue3DraggableResizable }
})

The Vue3DraggableResizable component allows elements to be dragged and resized. It supports v-model for synchronizing position (x, y), size (w, h), and active state (active).

Key features include:

• Enabling/disabling dragging and resizing via draggable and resizable props.
• Setting initial dimensions with initW and initH.
• Restricting movement/resizing to the parent container using the parent prop.
• Customizing resize handles via the handles array.

<template>
  <div class="parent">
    <Vue3DraggableResizable
      :initW="110"
      :initH="120"
      v-model:x="x"
      v-model:y="y"
      v-model:w="w"
      v-model:h="h"
      v-model:active="active"
      :draggable="true"
      :resizable="true"
      @activated="print('activated')"
      @drag-start="print('drag-start')"
    >
      This is a test example
    </Vue3DraggableResizable>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

export default defineComponent({
  components: { Vue3DraggableResizable },
  data() {
    return {
      x: 100,
      y: 100,
      h: 100,
      w: 100,
      active: false
    }
  },
  methods: {
    print(val) {
      console.log(val)
    }
  }
})
</script>

This example demonstrates how to use v-model to sync the component's state (position, size, and active status) with your component's data, and how to listen to various drag and resize events.

<template>
  <div id="app">
    <div class="parent">
      <Vue3DraggableResizable
        :initW="110"
        :initH="120"
        v-model:x="x"
        v-model:y="y"
        v-model:w="w"
        v-model:h="h"
        v-model:active="active"
        :draggable="true"
        :resizable="true"
        @activated="print('activated')"
        @deactivated="print('deactivated')"
        @drag-start="print('drag-start')"
        @resize-start="print('resize-start')"
        @dragging="print('dragging')"
        @resizing="print('resizing')"
        @drag-end="print('drag-end')"
        @resize-end="print('resize-end')"
      >
        This is a test example
      </Vue3DraggableResizable>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
  components: { Vue3DraggableResizable },
  data() {
    return {
      x: 100,
      y: 100,
      h: 100,
      w: 100,
      active: false
    }
  },
  methods: {
    print(val) {
      console.log(val)
    }
  }
})
</script>

<style>
.parent {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid #000;
  user-select: none;
}
</style>

The Vue3DraggableResizable component accepts several props to control its initial state, constraints, and appearance.

Dimensions and Position

• initW (Number): Set initial width (px).
• initH (Number): Set initial height (px).
• w (Number): Current width (px). Use v-model:w to keep it up-to-date.
• h (Number): Current height (px). Use v-model:h to keep it up-to-date.
• x (Number): Current left (px). Use v-model:x to keep it up-to-date.
• y (Number): Current top (px). Use v-model:y to keep it up-to-date.
• minW (Number): Minimum width (px).
• minH (Number): Minimum height (px).

Behavior and Constraints

• active (Boolean): Indicates if the component is selected. Use v-model:active to keep it up-to-date.
• draggable (Boolean): Enables/disables dragging (default: true).
• resizable (Boolean): Enables/disables resizing (default: true).
• lockAspectRatio (Boolean): Locks the aspect ratio.
• disabledX (Boolean): Disables movement on the x-axis.
• disabledY (Boolean): Disables movement on the y-axis.
• disabledW (Boolean): Disables width modification.
• disabledH (Boolean): Disables height modification.
• parent (Boolean): Restricts movement and size within its parent node.
• handles (Array): Defines which handles are available for resizing:
  • tl: Top left
  • tm: Top middle
  • tr: Top right
  • mr: Middle right
  • ml: Middle left
  • bl: Bottom left
  • bm: Bottom middle
  • br: Bottom right

Styling

• classNameDraggable (String): Custom class for the draggable state.
• classNameResizable (String): Custom class for the resizable state.
• classNameDragging (String): Custom class when currently dragging.
• classNameResizing (String): Custom class when currently resizing.
• classNameActive (String): Custom class when active.
• classNameHandle (String): Custom common class for each handle element.

The following props control the behavior and appearance of the Vue3DraggableResizable component: