基于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 对象比较实现代码
Apr 27 Javascript
js正确获取元素样式详解
Aug 07 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 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
thinkphp 多表 事务详解
2013/06/17 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
js编写选项卡效果
2017/05/23 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Django中处理出错页面的方法
2015/07/15 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
Python装饰器用法实例总结
2018/02/07 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python socket模块方法实现详解
2019/11/05 Python
python logging 日志的级别调整方式
2020/02/21 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
数控专业毕业生求职信范文
2013/09/21 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android