vue自定义指令之在某元素内实现元素的拖拽移动

export default {
  inserted(el) {
    let parentElement = el.parentElement; //获取当前元素的父级
    let currentElement = el; //获取当前元素
    currentElement.onmousedown = (e) => {
      //算出鼠标相对元素的位置
      let disX = e.clientX - parentElement.offsetLeft;
      let disY = e.clientY - parentElement.offsetTop;
      let layoutMain = document.getElementsByClassName("main_body")[0];
      document.onmousemove = (e) => {
        //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        if (left <= 10) {
          left = 10;
        } else if (left >= layoutMain.clientWidth - parentElement.offsetWidth - 50) {
          //document.documentElement.clientWidth 屏幕的可视宽度
          left = layoutMain.clientWidth - parentElement.offsetWidth - 50;
        }
        if (top <= 10) {
          top = 10;
        } else if (top >= layoutMain.clientHeight - parentElement.offsetHeight - 30) {
          // document.documentElement.clientHeight 屏幕的可视高度
          top = layoutMain.clientHeight - parentElement.offsetHeight - 30
        }
        //移动当前元素
        parentElement.style.left = left + 'px';
        parentElement.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }
}

import drag from './drag'

const install = function (Vue) {
  Vue.directive('drag', drag)
}

if (window.Vue) {
  window['drag'] = drag
  Vue.use(install);
}

drag.install = install
export default drag
import Vue from "vue"
import drag from "./drag"
Vue.directive("drag", drag);
  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值