Scaled vue can drag vue-draggable-resizable components used summary

feature

• Not rely

• Use can drag, resize or both
• Defining a resize handle
• To limit the size of the parent element and move or custom selector
• The capture element to a custom grid
• Drag limited to vertical or horizontal axis
• Maintain aspect ratio
• Enable touch function
• Use your own style
• Provide their own style to handle

Installation and basic usage

npm install --save vue-draggable-resizable

Write main.js in global registration components:

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

// 可选择导入默认样式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

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

Local registration: referenced components used in

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

Common attributes summary

: W default width 
: H default height 
: X = "50" default horizontal coordinate relative elemental who note 
: Y = "50" by default the outermost vertical relative elemental who noted 
: min -width = "50" minimum width 
: min - height = "50" minimum height 
: parent = "to true" restrained from out of the parent element
 parent = class restriction is not out of p- "p-event." element of the event 
: Grid moved horizontally and vertically, respectively, each able to take the number of pixel
 class -name custom component class following defines a dragging1

Common Event Summary

Event Description Document (clickable direct access) in ctrl + f search for "events" View event parameters detailed 
 
in this example is not elaborated on demo 
@ dragging = "onDrag"   Whenever drag component calls. 
@ Resizing = "onResize" Called whenever the component resized. 

This demo may be useless to use the 
@ DragStop = "onDragstop" invoked whenever the component stop dragging. 
@ Resizestop = "onResizstop" Whenever components stop calling when resizing 
@ Deactivated = "onDeactivated" whenever the user clicks anywhere outside the component calls 
@ activated = Called when "onActivated" click Components to display the handle. Note: The handle is vertical and horizontal components can click the box stretching point

For example

vue template code

  <div class="helloword">
    <div class="text-event">
      <vue-draggable-resizable
        :w="150"
        :h="150"
        :x="50"
        :y="50"
        :min-width="50"
        :min-height="50"
        :parent="true"
        :grid="[10,10]"
        class-name="dragging1"
        @dragging="onDrag"
        @resizing="onResize"
      >
        <p>
          Hello there! I am a flexible component. You can drag me around, you can adjust my size. 
          < Br /> 
          X-: {{X}} / the Y: {{Y}} - the Width: {{width}} / the Height: {{height}} 
        </ P > 
      </ VUE-draggable with-resizable > 
    </ div > 

    <! - relative to what the class is equal to the drag marks Note designated parent -> 
    < div class = "the p--Event" > 
      < VUE-draggable with-resizable 
       parent . "the p--Event" = 
      > 
        < the p- > by You CAN and a resize around Me Me Drag you Wish AS. </ P > 
      <
    div>
  </div>

vue script codes

export default {
  name: "HelloWorld",
  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;
    }
  }
};

Cascading Style Code vue

.helloword {
  overflow: hidden;
}
.text-event {
  float: left;
  height: 500px;
  width: 500px;
  border: 1px solid red;
  position: relative;

　　/ * Grid Settings * /

　　background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px;

}
.p-event {
  float: left;
  height: 300px;
  width: 300px;
  border: 1px solid blue;
  position: relative;
  margin-left: 20px;
}

.dragging1 {
  border: 1px solid #000;
  color: #000;
}

Operating results: both shall not exceed the limit set in the element itself

• Set the grid mesh width and height of 10 pixels, by:: grid dragging movement each attribute controls the number of pixels: grid: [10, 10]
• Click to display the handle assembly to adjust the height width
• Drag assembly may move horizontally and vertically to save real time width height data

Note: After dragging the background color is changed because of gif recorded