vue实现漂亮的窗口拖拽效果(可改变大小、最大化、关闭)

本文实例讲述了JS实现漂亮的窗口拖拽效果,供大家参考,具体如下:
特点：
① 窗口可以拖动；
② 窗口可以通过八个方向改变大小；
③ 窗口可以最大化、还原、关闭；
④ 限制窗口最小宽度/高度。

1. html部分

<template>
  <!-- 可拖拽,放大缩小,最大化可视的窗口 -->
  <div id="drag" ref="drag">
    <div class="title">
      <div class="text">这是一个可拖拽窗口</div>
      <div class="opeater">
        // 最大化
        <i class="max el-icon-full-screen" @click="oMax" v-if="isshow"></i>
        // 还原
        <i class="revert el-icon-copy-document" @click="oRevert" v-else></i>
        // 关闭
        <i class="close el-icon-close" @click="close"></i>
      </div>
    </div>
    <div class="resize resizeL"></div>
    <div class="resize resizeT"></div>
    <div class="resize resizeR"></div>
    <div class="resize resizeB"></div>
    <div class="resize resizeLT"></div>
    <div class="resize resizeTR"></div>
    <div class="resize resizeBR"></div>
    <div class="resize resizeLB"></div>
    <div class="content">
      // 插槽,可以放需要的内容
      <slot name="content"></slot>
    </div>
  </div>
</template>

2. css部分

#drag {
   
  position: absolute;
  z-index: 99999999;
  top: 100px;
  left: 15%;
  width: 70%;
  height: 600px;
  background-color: #f3f3f3;
  border-radius: 5px;
  .title {
   
    cursor: move;
    position: relative;
    height: 32px;
    line-height