Use vue-drag-resize in Vue to realize that the form can be dragged and resized at will

Scenes

If you follow the front-end and back-end separation version to teach you how to build the environment locally and run the project:

If you separate the front and back ends, you will learn how to build the environment and run the project locally

On the basis of the above, the pop-up window can be moved and scaled at will.

The effect is as follows

 

Note:

Blog:
https://blog.csdn.net/badao_liumang_qizhi 

accomplish

1、vue-drag-resize

https://github.com/kirillmurashov/vue-drag-resize

Example demo address

Vue-drag-resize

2. Installation

npm i -s vue-drag-resize

3. Register components

import Vue from 'vue'
import VueDragResize from 'vue-drag-resize'

Vue.component('vue-drag-resize', VueDragResize)

4. Use of components

<template>
    <div id="app">
        <VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
            <h3>Hello World!</h3>
            <p>{
   
   { top }} х {
   
   { left }} </p>
            <p>{
   
   { width }} х {
   
   { height }}</p>
        </VueDragResize>
    </div>
</template>

<script>
    import VueDragResize from 'vue-drag-resize';

    export default {
        name: 'app',

        components: {
            VueDragResize
        },

        data() {
            return {
                width: 0,
                height: 0,
                top: 0,
                left: 0
            }
        },

        methods: {
            resize(newRect) {
                this.width = newRect.width;
                this.height = newRect.height;
                this.top = newRect.top;
                this.left = newRect.left;
            }
        }
    }
</script>

5. Properties

isActive

Type: Boolean
Required: false
Default: false

Determines whether the component should be active.

Determines whether the component should be active.

<vue-drag-resize :isActive="true">

preventActiveBehavior

Type: Boolean
Required: false
Default: false

Disable behavior of the component by clicking on it and clicking outside the component's area (isActive: true / false).
If the prop is enabled, the component is oriented only to the specified.

Disables the component's behavior (isActive: true/false) by clicking on the component and clicking outside the component's area.
If the prop is enabled, the component only faces the specified.

<vue-drag-resize :preventActiveBehavior="true">

parentW

Type: Number
Required: false
Default: 0

Define the initial width of the parent element. If not specified it calculated automatically.
With this parameter, you can set the bounding area for the component, and also it is used when resizing in real time.

Defines the initial width of the parent element. If not specified, it is calculated automatically.
Using this parameter, you can set the bounding area of ​​the component and use it when resizing in real time.

<vue-drag-resize :parentW="2000">

parentH

Type: Number
Required: false
Default: 0

Define the initial height of the parent element. If not specified it calculated automatically.
With this parameter, you can set the bounding area for the component, and also it is used when resizing in real time.

Defines the initial height of the parent element. If not specified, it is calculated automatically. Using this parameter, you can set the bounding area of ​​the component and use it when resizing in real time.

<vue-drag-resize :parentH="2000">

parentScaleX

Type: Number
Required: false
Default: 1

Define the initial horizontal scale or the parent element. Same value in parent's transform: scale() css definition.
The drag/resize and the sticks' sizes will computed with this value.

Defines the initial horizontal scale or parent element. Same value in parent's transform:scale() css definition.
Drag/resize and rod size will be calculated using this value.

<vue-drag-resize :parentScaleX="0.5">

parentScaleY

Type: Number
Required: false
Default: 1

Define the initial vertical scale or the parent element. Same value in parent's transform: scale() css definition.
The drag/resize and the sticks' sizes will computed with this value.

Defines the initial vertical scale or parent element. Same value in parent's transform:scale() css definition.
Drag/resize and rod size will be calculated using this value.

<vue-drag-resize :parentScaleY="0.5">

isDraggable

Type: Boolean
Required: false
Default: true

Determines whether the component should draggable.

Determines whether the component should be draggable.

<vue-drag-resize :isDraggable="false">

isResizable

Type: Boolean
Required: false
Default: true

Determines whether the component should resize.

Determines whether the component should be resized.

<vue-drag-resize :isResizable="false">

parentLimitation

Type: Boolean
Required: false
Default: false

Limits the scope of the component's change to its parent size.

Limits the scope of component changes to its parent size.

<vue-drag-resize :parentLimitation="true">

snapToGrid

Type: Boolean
Required: false
Default: false

Determines whether the component should move and resize in predefined steps.

<vue-drag-resize :snapToGrid="true">

gridX

Type: Number
Required: false
Default: 50

Define the grid step size for the horizontal axis. Both sides of the component (left and right) will snap to this step.

<vue-drag-resize :snapToGrid="true" :gridX="20">

gridY

Type: Number
Required: false
Default: 50

Define the grid step size for the vertical axis. Both sides of the component (top and bottom) will snap to this step.

<vue-drag-resize :snapToGrid="true" :gridY="20">

aspectRatio

Type: Boolean
Required: false
Default: false

Determines whether the component should retain its proportions.

Determines whether the component should maintain its proportions.

<vue-drag-resize :aspectRatio="false">

w

Type: Number|String
Required: false
Default: 200

Define the initial width of the component.
The value can either be a number >= 0 or the string 'auto'.
If set to 'auto', the initial width value will be equal to the width of the content within the component.

Defines the initial width of the component.

<vue-drag-resize :w="200">

h

Type: Number|String
Required: false
Default: 200

Define the initial height of the component.
The value can either be a number >= 0 or the string 'auto'.
If set to 'auto', the initial height value will be equal to the height of the content within the component.

Defines the initial height of the component.

<vue-drag-resize :h="200">

whom

Type: Number
Required: false
Default: 50

Define the minimal width of the component.

Defines the initial width of the component.

<vue-drag-resize :minw="50">

minh

Type: Number
Required: false
Default: 50

Define the minimal height of the component.

Defines the minimum height of the component.

<vue-drag-resize :minh="50">

x

Type: Number
Required: false
Default: 0

Define the initial x position of the component.

Defines the initial X position of the component.

<vue-drag-resize :x="0">

y

Type: Number
Required: false
Default: 0

Define the initial y position of the component.

Defines the initial Y position of the component.

<vue-drag-resize :y="0">

z

Type: Number|String
Required: false
Default: auto

Define the zIndex of the component.

Defines the zindex (level) of the component.

<vue-drag-resize :z="999">

stickSize

Type: Number
Required: false
Default 8

Define the sticks' size.

<vue-drag-resize :stickSize="12">

sticks

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

Define the array of handles to restrict the element resizing:

Define an array of handles to limit 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-drag-resize :sticks="['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, both or none.

Defines the axis along which the element can be dragged. Available values ​​are x, y, bothor none.

<vue-drag-resize axis="x">

dragHandle

Type: String
Required: false

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

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

<vue-drag-resize dragHandle=".drag">

dragCancel

Type: String
Required: false

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

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

<vue-drag-resize dragCancel=".drag">

contentClass

Type: String
Required: false

Defines a class that is applied on the div with the class vdr

<vue-drag-resize contentClass="box-shaddow">

---

Events

clicked

Required: false
Parameters: Original event handler

Called whenever the component gets clicked.

Called when the component is clicked.

<vue-drag-resize @clicked="onActivated">

activated

Required: false
Parameters: -

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

Called when the component is clicked to display the handle.

<vue-drag-resize @activated="onActivated">

deactivated

Required: false
Parameters: -

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

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

<vue-drag-resize @deactivated="onDeactivated">

resizing

Required: false
Parameters: object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component gets resized.

Called whenever the component is resized.

<vue-drag-resize @resizing="onResizing">

resizestop

Required: false
Parameters: object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component stops getting resized.

Called whenever the component stops resizing.

<vue-drag-resize @resizestop="onResizstop">

dragging

Required: false
Parameters: object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component gets dragged.

Called whenever a component is dragged.

<vue-drag-resize @dragging="onDragging">

dragstop

Required: false
Parameters: object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component stops getting dragged.

Called whenever the component stops being dragged.

<vue-drag-resize @dragstop="onDragstop">