JS函数封装实现控件拖拽

js脚本

export function dragBox(drag, wrap) {

  //  用于获取父容器的样式属性值
  function getCss(ele, prop) {
    // getComputedStyle返回值是带单位的字符串，所以得parseInt
    return parseInt(window.getComputedStyle(ele)[prop]);
  }

  // 鼠标点击位置的屏幕x,y坐标
  let initX;
  let initY;

  // 父容器的屏幕x,y坐标
  let wrapLeft;
  let wrapRight;

  // 用于判断鼠标按住与松开
  let dragable = false;
  // 给子容器绑定mousedown事件
  drag.addEventListener(
    "mousedown",
    function (e) {
      dragable = true;
      wrapLeft = getCss(wrap, "left");
      wrapRight = getCss(wrap, "top");
      initX = e.clientX;
      initY = e.clientY;
    },
    false
  );

  // 给子容器绑定mouseup事件
  drag.addEventListener(
    "mouseup",
    function (e) {
      dragable = false;
    },
    false
  );

  // 页面绑定mousemove事件
  document.addEventListener("mousemove", function (e) {
    if (dragable === true) {
      let nowX = e.clientX;
      let nowY = e.clientY;
      let disX = nowX - initX;
      let disY = nowY - initY;
      wrap.style.left = wrapLeft + disX + "px";
      wrap.style.top = wrapRight + disY + "px";
    }
  });
}

vue页面使用

<template>
<div id="father">
    <div id="son"/>
    ......
</div>
</template>
<script>
import { dragBox } from '@/utils/controls'
export default {
    .....

    mounted(){
        this.$nextTick(()=>{
            dragBox(document.querySelector('.son'),document.querySelector('#father'))
        })
    },

    ......
}
</script>
<style>
#father{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;

    #son{
        cursor: move;
    }

    ......
}
</style>

注意这里的函数会形成闭包，变量会一直保存在内存

效果展示