vue拖拽指令之offsetX、clientX、pageX、screenX

vue拖拽指令之offsetX、clientX、pageX、screenX

技术杂谈小彩虹2021-08-21 13:56:09220A+A-

自己一直很想做个拖拽生成静态页面的东西,说简单也简单,这个东西按道理用jsx语法是最好的,用render方法渲染生成的json。只是自己对这块还是没信心。今天写个vue的拖拽指令,顺便理一下offsetX、pageX、clientX、screenX这几个属性,一直记不住。

先大概记一下这几个的翻译(应该是正确的): offset:偏移;client:客户;page:页面;screen:屏幕;

offsetX:相对于触发元素的偏移距离; clientX:相对于客户端浏览器的距离,可以理解成相对于地址栏以下的区域; pageX:相对于整个页面的距离,比clientX要加上滚动条移动的距离; screenX:相对于整个屏幕的距离,包含地址栏;

搞明白了这几个相对的距离,就比较容易计算拖拽的距离了。很早之前就分享过拖拽的一个简单demo,拖拽指令也很简单:

Vue.directive('draggable', {
  inserted: function (el,data) {
    el.style.position = 'absolute';
    el.style.cursor = 'move';
    el.onmousedown = function(event){
      let startX = event.clientX;
      let startY = event.clientY;
      let left = el.offsetLeft;
      let top = el.offsetTop;
      document.onmousemove = function(event){
        let X = event.clientX - startX
        let Y = event.clientY - startY;
        el.style.left = `${X + left}px`;
        el.style.top = `${Y + top}px`;
      }
      document.onmouseup = function(){
        document.onmousemove = document.onmouseup = null;
      };
    }
  }
})

这边只需要注意把监听元素绑定在document上,另外就是鼠标抬起的时候就移除监听。使用的时候:

请拖拽

这是最基础版的,不同需求可能会有不一样的条件,比如移动的距离是否可以小于0,或者限制在某个相对定位relative框里面,这时候是否限制最大最小的移动距离,可以通过传参还是传递元素之类的方法去实现。

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们