vue-draggable-resizable

To use vue-draggable-resizable in your Vue project, install it via npm and register it globally. Note that the component does not include CSS by default; you must import the styles separately.

$ npm install --save vue-draggable-resizable

// main.js
import { createApp } from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
import App from './App.vue'

createApp(App)
  .component("vue-draggable-resizable", VueDraggableResizable)
  .mount('#app')

// App.vue
<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vue-draggable-resizable :w="100" :h="100" :parent="true">
      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.</p>
    </vue-draggable-resizable>
  </div>
</template>

<style>
@import "vue-draggable-resizable/style.css";
</style>

To explore examples and interact with the component in a local environment, you can run the project's playground using Storybook by following these steps:

1. Clone the repository.
2. Install dependencies using npm install.
3. Start the development server with npm run story:dev.
4. Open your browser and visit http://localhost:6006/.

You can customize the CSS classes used by the component for various states and elements using the following props. This allows for easier custom styling of the draggable/resizable container and its handles.

• className: Custom class for the component (default: vdr).
• classNameDraggable: Custom class when draggable is enabled (default: draggable).
• classNameResizable: Custom class when resizable is enabled (default: resizable).
• classNameDragging: Custom class while dragging (default: dragging).
• classNameResizing: Custom class while resizing (default: resizing).
• classNameActive: Custom class when active (default: active).
• classNameHandle: Custom common class for each handle element (default: handle). You can style specific handles using <your-class>-<handle-code> (e.g., .my-handle-class-tl).

The component provides several callback props that allow you to intercept and potentially cancel drag or resize actions. If a callback returns false, the action is cancelled.

Drag Callbacks

• onDragStart(ev): Called when dragging starts. Use to prevent bubbling or cancel action.
• onDrag(x, y): Called before the element is dragged. Receives next x and y values.

Resize Callbacks

• onResizeStart(handle, ev): Called when resizing starts. Receives the handle and event.
• onResize(handle, x, y, width, height): Called before the element is resized. Receives handle and next dimensions/position.

The component emits several events to track state changes:

• @activated: Emitted when the component is clicked to show handles.
• @deactivated: Emitted when the user clicks outside the component.
• @resizing: Emitted during resize. Parameters: left, top, width, height.
• @resizestop: Emitted when resizing ends. Parameters: left, top, width, height.
• @dragging: Emitted during drag. Parameters: left, top.
• @dragstop: Emitted when dragging ends. Parameters: left, top.