VueDraggableResizable

Basic component

The most basic component, without any props, free to move even outside the parent element.

<vue-draggable-resizable>
  <p>You can drag me around and resize me as you wish.</p>
</vue-draggable-resizable>

Component costraind in parent

Component that cannot be dragged or resized outside its parent element, defined with the prop :parent="true"

<vue-draggable-resizable :parent="true">
  <p>You cannot move or resize me outside my parent.</p>
</vue-draggable-resizable>

Bonus: a component constrained in parent, can automatically fill the space just by double-clicking on it.

Component costrained on x axis

Component that can be dragged and resized only on x axis. Drag constrain is defined using axis="x" prop, while resizing costrain can be achieved by defining only left and right handles :handles="['ml','mr']".

<vue-draggable-resizable :parent="true" axis="x" :handles="['ml','mr']">
  <p>You can move me or resize me only horizontally.</p>
</vue-draggable-resizable>

Component snap to grid

Component that can be snapped to a grid. Just set the dimensions of grid cells (height and width in pixels) with the grid prop :grid="[25,25]"

<vue-draggable-resizable :parent="true" :grid="[25,25]">
  <p>You can snap me on a grid.</p>
</vue-draggable-resizable>

Event handling

More complex example with event handling.

<vue-draggable-resizable :parent="true" @activated="onActivate" @deactivated="onDeactivate" @resizing="onResize" @dragging="onDrag">
  <p>I can render my position and my dimensions.</p>
</vue-draggable-resizable>

Multiple components

Multiple resizable and draggable components. Notice how the Component 3 automatically fits in its parent, even if its default size exceeds the boudaries.

<template v-for="element in elements">
  <vue-draggable-resizable :parent="true" :resizable="true" :x="element.x" :y="element.y" style="border: 1px solid">
    <p>{{ element.text }}</p>
  </vue-draggable-resizable>
</template>

External activation

You can sync the `active` prop in order to activate the component externally, e.g. using a button.

<vue-draggable-resizable :parent="true" :resizable="true" :active.sync="true" style="border: 1px solid">
  <p>Use the button to activate me!</p>
</vue-draggable-resizable>

Drag Handle and Drag Cancel

Component that can be dragged only through a handle :drag-handle="'.drag'" and component that cannot be dragged from a handle :drag-cancel="'.cancel'"

<vue-draggable-resizable :parent="true" style="border: 1px solid black;" :drag-handle="'.drag'">
  <div class="drag" style="padding: 6px; margin: 6px; background-color: #CCC; border: 2px solid">Drag Only Here</div>
</vue-draggable-resizable>
<vue-draggable-resizable :x="300" :y="0" :parent="true" style="border: 1px solid black;" :drag-cancel="'.cancel'">
  <div class="cancel" style="padding: 6px; margin: 6px; background-color: #CCC; border: 2px solid">Cannot Drag Here</div>
</vue-draggable-resizable>