A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/mauricius/vue-draggable-resizable/tree/v1 below:

GitHub - mauricius/vue-draggable-resizable at v1

Vue2 Component for draggable and resizable elements.

Demo

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

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

Type: Boolean
Required: false
Default: true

Defines it the component should be draggable or not.

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

Type: Boolean
Required: false
Default: true

Defines it the component should be resizable or not.

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

Type: Number
Required: false
Default: 200

Define the initial width of the element.

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

Type: Number
Required: false
Default: 200

Define the initial height of the element.

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

Type: Number
Required: false
Default: 50

Define the minimal width of the element.

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

Type: Number
Required: false
Default: 50

Define the minimal height of the element.

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

Type: Number
Required: false
Default: 0

Define the initial x position of the element.

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

Type: Number
Required: false
Default: 0

Define the initial y position of the element.

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

Type: Number|String
Required: false
Default: auto

Define the zIndex of the element.

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

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

Define the array of handles to restrict the element resizing:

<vue-draggable-resizable :handles="['tm','bm','ml','mr']">

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

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

Define the grid on which the element is snapped.

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

Type: Boolean
Required: false
Default: false

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

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

Type: String
Required: false

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

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

Type: String
Required: false

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

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

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

Required: false
Parameters: -

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

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

Required: false
Parameters: -

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

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

Required: false
Parameters:

Called whenever the component gets resized.

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

Required: false
Parameters:

Called whenever the component stops getting resized.

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

Required: false
Parameters:

Called whenever the component gets dragged.

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

Required: false
Parameters:

Called whenever the component stops getting dragged.

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

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.

If you have contents inside a component that shall be selectable or get the window's focus (e.g. input elements), use the dragHandle property to explicitly define the draggable area or dragCancel to exclude elements from being so.

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

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

MIT license

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4