基于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 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
JS实现字符串翻转的方法分析
Aug 31 Javascript
Vue性能优化的方法
Jul 30 Javascript
JS实现九宫格拼图游戏
Jun 28 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从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
javascript下string.format函数补充
2010/08/24 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
理解Python中的类与实例
2015/04/27 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
百日安全活动总结
2014/05/04 职场文书
门店业绩提升方案
2014/06/08 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
四风查摆问题自查报告
2014/10/10 职场文书