基于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引导程序
Oct 26 Javascript
最短的IE判断代码
Mar 13 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
用Eclipse写python程序
2018/02/10 Python
pandas中去除指定字符的实例
2018/05/18 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
普天C++笔试题
2016/03/20 面试题
学校清明节活动总结
2014/07/04 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
学校远程教育工作总结
2015/08/11 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python