vue可拖拽控件

1、npm i -s vue-drag-resize
2、代码

<!--
 * @Author: your name
 * @Date: 2021-08-24 16:19:11
 * @LastEditTime: 2021-08-24 16:30:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \internetPlatform\src\views\zhangming\systemManage\test4.vue
-->
<template>
  <div>
    <VueDragResize :is-active="true" :w="200" :h="200" @resizing="resize" @dragging="resize">
      <!-- <h3>Hello World!</h3>
      <p>{{ top }} х {{ left }}</p>
      <p>{{ width }} х {{ height }}</p> -->
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
    </VueDragResize>
  </div>
</template>

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

  export default {
    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>

<style lang="scss" scoped></style>