原生js、vue超强拖动伸缩插件vue-draggable-resizable实现拖动div窗口功能实现

<div :style="dialogHeight" class="pathfind dialog" ref="dialogRef"
       v-show="visible.isShow" @mousedown="mouseDownHandleelse($event)"  @mouseup="mouseUpHandleelse($event)">

// 内容

</div>
<script>
  export default {
    methods: {
      mouseDownHandleelse(event) {
        // 判断文本框是否聚焦 文本框聚焦时不能移动窗口
        var inputs = document.getElementsByClassName("search-input")
        var flag = false
        for (let i = 0; i < inputs.length; i++) {
          let temp = inputs[i].getElementsByClassName("el-input__inner")
          for (let j = 0; j < temp.length; j++) {
            if (temp[j] == document.activeElement) flag = true
          }
        }
        if (!flag) {
            // 计算当前鼠标在窗口中的位置
          this.moveDataelse.x = event.pageX - this.$refs.dialogRef.offsetLeft
          this.moveDataelse.y = event.pageY - this.$refs.dialogRef.offsetTop
          event.currentTarget.style.cursor = 'move'
          window.onmousemove = this.mouseMoveHandleelse
        }
      },
      mouseMoveHandleelse(event) {
        // 计算窗口拖动后距离上边有右边的距离（我的需求时靠右，可以计算靠左更简单点）
        let moveRight = window.innerWidth - this.$refs.dialogRef.offsetWidth - (event.pageX - this.moveDataelse.x) + 'px'
        let moveTop = event.pageY - this.moveDataelse.y + 'px'
        this.$refs.dialogRef.style.right = moveRight
        this.$refs.dialogRef.style.top = moveTop
      },
      mouseUpHandleelse(event) {
        window.onmousemove = null
        event.currentTarget.style.cursor = 'default'
      }
    }
  }
</script>

vue的 vue-draggable-resizable插件实现

各种强大灵活参数和事件参考官网修改：https://github.com/gorkys/vue-draggable-resizable

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vdr :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true" :min-width="200" :min-height="200">
      <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>
    </vdr>
    <vdr
      :w="200"
      :h="200"
      :parent="true"
      :debug="false"
      :min-width="200"
      :min-height="200"
      :isConflictCheck="true"
      :snap="true"
      :snapTolerance="20"
    >
    </vdr>
  </div>
</template>

<script>
  import vdr from 'vue-draggable-resizable-gorkys'
  import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'

  export default {
    components: { vdr },
    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>