Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-draggable-resizable

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-draggable-resizable

Vue2 Component for resizable and draggable elements

  • 1.1.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
40K
increased by8.46%
Maintainers
1
Weekly downloads
 
Created
Source

logo

VueDraggableResizable

Software License

Vue2 Component for draggable and resizable elements.

Features

  • No dependencies
  • Use draggable, resizable or both
  • Define handles for resizing
  • Restrict size and movement to parent element
  • Snap element to custom grid
  • Restrict drag to vertical or horizontal axis

Demo

Demo


Install & basic usage

$ npm install --save vue-draggable-resizable

Register the component

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

Vue.component('vue-draggable-resizable', VueDraggableResizable)

You may now use the component in your markup

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vue-draggable-resizable :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
      X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
    </vue-draggable-resizable>
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  data: function () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  methods: {
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    }
  }
}
</script>

Props

draggable

Type: Boolean
Required: false
Default: true

Defines it the component should be draggable or not.

<vue-draggable-resizable :draggable="false">
resizable

Type: Boolean
Required: false
Default: true

Defines it the component should be resizable or not.

<vue-draggable-resizable :resizable="false">
w

Type: Number
Required: false
Default: 200

Define the initial width of the element.

<vue-draggable-resizable :w="200">
h

Type: Number
Required: false
Default: 200

Define the initial height of the element.

<vue-draggable-resizable :h="200">
minw

Type: Number
Required: false
Default: 50

Define the minimal width of the element.

<vue-draggable-resizable :minw="50">
minh

Type: Number
Required: false
Default: 50

Define the minimal height of the element.

<vue-draggable-resizable :minh="50">
x

Type: Number
Required: false
Default: 0

Define the initial x position of the element.

<vue-draggable-resizable :x="0">
y

Type: Number
Required: false
Default: 0

Define the initial y position of the element.

<vue-draggable-resizable :y="0">
handles

Type: Array
Required: false
Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']

Define the array of handles to restrict the element resizing:

  • tl - Top left
  • tm - Top middle
  • tr - Top right
  • mr - Middle right
  • br - Bottom right
  • bm - Bottom middle
  • bl - Bottom left
  • ml - Middle left
<vue-draggable-resizable :handles="['tm','bm','ml','mr']">
axis

Type: String
Required: false
Default: both

Define the axis on which the element is draggable. Available values are x, y or both.

<vue-draggable-resizable :axis="x">
grid

Type: Array
Required: false
Default: [1,1]

Define the grid on which the element is snapped.

<vue-draggable-resizable :grid="[1,1]">
parent

Type: Boolean
Required: false
Default: false

Restricts the movement and the dimensions of the element to the parent.

<vue-draggable-resizable :parent="true">

Events

activated

Required: false
Parameters: -

Called whenever the component gets clicked, in order to show handles.

<vue-draggable-resizable @activated="onActivated">
deactivated

Required: false
Parameters: -

Called whenever the user clicks anywhere outside the component, in order to deactivate it.

<vue-draggable-resizable @deactivated="onDeactivated">
resizing

Required: false
Parameters:

  • left the X position of the element
  • top the Y position of the element
  • width the width of the element
  • height the height of the element

Called whenever the component gets resized.

<vue-draggable-resizable @resizing="onResizing">
resizestop

Required: false
Parameters:

  • left the X position of the element
  • top the Y position of the element
  • width the width of the element
  • height the height of the element

Called whenever the component stops getting resized.

<vue-draggable-resizable @resizestop="onResizstop">
dragging

Required: false
Parameters:

  • left the X position of the element
  • top the Y position of the element

Called whenever the component gets dragged.

<vue-draggable-resizable @dragging="onDragging">
dragstop

Required: false
Parameters:

  • left the X position of the element
  • top the Y position of the element

Called whenever the component stops getting dragged.

<vue-draggable-resizable @dragstop="onDragstop">

Gotchas

Be careful to use appropriate values for x, y, w, h, minh and minh props when you want to restrict the component in its parent element.

Bonus

If resizing and parent props are both true you can double-click on the element to make it fill the parent.

Contributing

Any contribution to the code or any part of the documentation and any idea and/or suggestion are very welcome.

# serve with hot reload at localhost:8080
npm run dev

# distribution build
npm run build

# build the docs into gh-pages
npm run docs

# run unit tests
npm run test

License

MIT license

Keywords

FAQs

Package last updated on 03 Jul 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc