npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@oleavr/vue-draggable-resizable

v1.7.1

Published

Vue2 Component for resizable and draggable elements

Downloads

14

Readme

Latest Version on NPM Software License npm

Vue2 Component for draggable and resizable elements.

Table of Contents

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 and 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

active

Type: Boolean Required: false Default: false

Determines if the component should be active or not. The prop reacts to changes and also can be used with the syncmodifier to keep the state in sync with the parent.

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

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">

z

Type: Number|String Required: false Default: auto

Define the zIndex of the element.

<vue-draggable-resizable :z="999">

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">

dragHandle

Type: String Required: false

Defines the selector that should be used to drag the component.

<vue-draggable-resizable drag-handle=".drag">

dragCancel

Type: String Required: false

Defines a selector that should be used to prevent drag initialization.

<vue-draggable-resizable drag-cancel=".drag">

maximize

Type: Boolean Required: false Default: false

If set to true allows the component to fill its parent when double-clicked.

<vue-draggable-resizable :maximize="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, parent and maximize props are true you can double-click on the element to make it fill the parent.

Roadmap

  • [x] Touch support (thanks @ojczeo)
  • [ ] Fix grid issues (#34, #58) - In progress
  • [ ] Implement Storybook - In progress
  • [ ] Aspect ratio on resizing (#26) - In progress
  • [ ] maxWidth and maxHeight props (#76) - In progress
  • [ ] Different approach with CSS styles (#73)
  • [ ] Watching props for changes (requires refactoring and possibly breaking changes)

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