vue 自定义移动函数

首先在要移动的div上添加v-drage

<div class="tool" v-drag></div>

然后在vue实例里面跟method添加如下代码:

directives: {
    drag(el, bindings) {
      el.onmousedown = function(e) {
      // 这个是移动的范围元素
        var parent = document.getElementById("main");
        // 计算移动元素最大可移动的left、top,限制其移除框外
        var maxLeft = parent.offsetWidth - el.offsetWidth;
        var maxTop = parent.offsetHeight - el.offsetHeight;
        if (e.target == el) {
        // 计算移动元素需要减去的部分,60是我的限制框距离body的最左边的宽度,e.offsetX是鼠标点击的位置距离移动元素左边框的距离
          var disx = 60 + e.offsetX;
          var disy = 40 + e.offsetY;
          document.onmousemove = function(e) {
            if (e.clientX - disx < 0) {
              el.style.left = 0;
            } else if (e.clientX - disx > 0 && e.clientX - disx < maxLeft) {
              el.style.left = e.clientX - disx + "px";
            } else {
              el.style.left = maxLeft + "px";
            }
            if (e.clientY - disy < 0) {
              el.style.top = 0;
            } else if (e.clientY - disy > 0 && e.clientY - disy < maxTop) {
              el.style.top = e.clientY - disy + "px";
            } else {
              el.style.top = maxTop + "px";
            }
          };
          document.onmouseup = function() {
            document.onmousemove = document.onmouseup = null;
          };
        }
      };
    }
  }

移动时可在mounted函数里面添加如下代码,防止移动选中文字

document.onselectstart = function() {
      return false;
    };
发布了3 篇原创文章 · 获赞 0 · 访问量 55
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览