基于Vue实现拖拽效果


Posted in Javascript onApril 27, 2018

效果图

基于Vue实现拖拽效果 

demo1.gif

分清clientY pageY screenY layerY offsetY的区别

在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可以继续实现我们的拖拽效果

clientY 指的是距离可视页面左上角的距离
pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
screenY 指的是距离屏幕左上角的距离
layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
offsetY 指的是距离它自己左上角的距离
一张图带大家简单了解了解

基于Vue实现拖拽效果 

区别

在我们简单了解完这些个属性以后,有几个属性需要分清。

相同点 不同点
clientY 距离页面左上角距离 受页面滚动的影响
pageY 距离页面左上角的距离 不受页面滚动影响
相同点 不同点
layerY 距离元素的左上角距离 受元素的定位的影响,会从本元素往上找到第一个定位的元素的左上角
offsetY 距离元素左上角的距离 计算相对于本元素的左上角,不在乎定位问题,计算的是内交点。是IE浏览器的特有属性

基于Vue实现拖拽效果 

layerY与offsetY区别

实现拖拽功能

我们既然熟悉了这几个偏移属性的意思,那么我们就进入我们的重点。话不多说直接上代码

// darg.html

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*设置一下背景*/
  }
</style>
<body>
  <div id="app" @mousedown="move">    <!--绑定按下事件-->
    {{positionX}}
    {{positionY}}
  </div>
</body>
//main.js
let app = new Vue({
  el:'#app',
  data:{
    positionX:0,
    positionY:0,
  },
  methods:{
    move(e){
      let odiv = e.target;    //获取目标元素
      
      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
        let left = e.clientX - disX;  
        let top = e.clientY - disY;
        
        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;
        
        //移动当前元素
        odiv.style.left = left + 'px';
        odiv.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }  
  
  },
  computed:{},
});

当然,我们可以将它绑定为一个自定义指令,这样的话就可以用调用指令的形式来实现拖拽效果,下面是定义自定义指令的代码

// darg.html

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*设置一下背景*/
  }
</style>
<body>
  <div id="app" v-drag>    <!--实现用指令形式实现拖拽效果-->
    
  </div>
</body>
//main.js

let app = new Vue({
  el:'#app',
  data:{},
  methods:{},
  directives: {
    drag: {
      // 指令的定义
      bind: function (el) {
        let odiv = el;  //获取当前元素
        oDiv.onmousedown = (e) => {
          //算出鼠标相对元素的位置
          let disX = e.clientX - odiv.offsetLeft;
          let disY = e.clientY - odiv.offsetTop;
          
          document.onmousemove = (e)=>{
            //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
            let left = e.clientX - disX;  
            let top = e.clientY - disY;
           
            //绑定元素位置到positionX和positionY上面
            this.positionX = top;
            this.positionY = left;
        
            //移动当前元素
            odiv.style.left = left + 'px';
            odiv.style.top = top + 'px';
          };
          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
});

最后

到这里我们就已经把拖拽效果用Vue实现了,我们用了两种不同的方式实现了拖拽,但实际上换汤不换药,我们需要弄清楚pageY、screenY、clientY、layerY、offsetY等区别。当然我们同时也学习了Vue的一些方法,例如自定义指令等。

以上所述是小编给大家介绍的基于Vue实现拖拽效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
js倒计时简单实现代码
Aug 11 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
Vue通过input筛选数据
Oct 26 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 #Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 #Javascript
使用Vue动态生成form表单的实例代码
Apr 26 #Javascript
Javascript的console['']常用输入方法汇总
Apr 26 #Javascript
r.js来合并压缩css文件的示例
Apr 26 #Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 #jQuery
Webpack打包字体font-awesome的方法示例
Apr 26 #Javascript
You might like
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python实现人人网登录示例分享
2014/01/19 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Python3中列表list合并的四种方法
2019/04/19 Python
python进程和线程用法知识点总结
2019/05/28 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
不拖欠农民工工资承诺书
2014/03/31 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
违章停车检讨书
2014/10/21 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
详解Java实践之适配器模式
2021/06/18 Java/Android
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
Anaconda配置各版本Pytorch的实现
2021/08/07 Python