vue实现移动端div拖动效果


Posted in Vue.js onMarch 03, 2022

本文实例为大家分享了vue实现移动端div拖动的具体代码,供大家参考,具体内容如下

手机上会偶尔用到拖动div的效果,虽然我自己还没遇到,先写一个以防万一,需要注明的是,具体实现代码是我在网上找的,但是那个代码存在一些问题,我又搜集了其他资料对其修改,达到了现在的样子,所以还是要感谢写这段代码的大神与万能的搜索引擎

1、分享代码

html代码

<template>
  <div class="main">
    <div ref="move_div" @touchstart="down" @touchmove="move" @touchend="end" :style="{top: top  + 'px', left: left  + 'px'}" class="drag_area"></div>
  </div>
</template>

极其简单的结构,毕竟只是个DEMO

SCSS代码

.main{
    background-color: brown;
    height: -webkit-fill-available;
    .drag_area{
      width: 10vw;
      height: 10vw;
      background-color: dodgerblue;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

为了截图显眼,特地给main加了个背景颜色

效果图

vue实现移动端div拖动效果

效果呢,就是你可以在屏幕范围内自由拖动蓝色色块,不过超出屏幕区域我特意做了限制,不需要限制的可以自己改

JS代码

export default {
  name: 'drag',
  data () {
    return {
      flags: false,
      position: {x: 0, y: 0, left: 0, top: 0},
      top: 0,
      left: 0,
      width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
      height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
  },
  methods: {
    down () { // 拖动开始的操作
      this.flags = true
      const refs = this.$refs.move_div.getBoundingClientRect()
      let touch = event
      if (event.touches) {
        touch = event.touches[0]
      }
      this.position.x = touch.clientX
      this.position.y = touch.clientY
      this.position.left = refs.left
      this.position.top = refs.top
    },
    move () { // 拖动中的操作
      if (this.flags) {
        let touch = event
        if (event.touches) {
          touch = event.touches[0]
        }
        const xPum = this.position.left + touch.clientX - this.position.x
        const yPum = this.position.top + touch.clientY - this.position.y
        this.left = xPum
        this.top = yPum
        this.banOut()
        // 阻止页面的滑动默认事件
        document.addEventListener('touchmove', function () {
          event.preventDefault()
        }, {passive: false})
      }
    },
    end () { // 拖动结束的操作
      this.flags = false
      this.banOut()
    },
    banOut () { // 避免拖动出界的限制
      const refs = this.$refs.move_div.getBoundingClientRect()
      if (this.left < 0) {
        this.left = 0
      } else if (this.left > this.width - refs.width) {
        this.left = this.width - refs.width
      }
      if (this.top < 0) {
        this.top = 0
      } else if (this.top > this.height - refs.height) {
        this.top = this.height - refs.height
      }
    }
  }
}

代码呢,简洁明了,你要是对touch事件有学习需求呢可以自己琢磨,要是只是要用呢,复制粘贴改一改就行了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue $router和$route的区别详解
Dec 02 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue实现滑动解锁功能
Vue全局事件总线你了解吗
Feb 24 #Vue.js
Vue的生命周期一起来看看
Vue的过滤器你真了解吗
Feb 24 #Vue.js
Vue监视数据的原理详解
Feb 24 #Vue.js
Vue的列表之渲染,排序,过滤详解
Vue3如何理解ref toRef和toRefs的区别
Feb 18 #Vue.js
You might like
PHP file_exists问题杂谈
2012/05/07 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
javascript常见操作汇总
2014/09/03 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
基于python操作ES实例详解
2019/11/16 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
介绍一下你对SOA的认识
2016/04/24 面试题
职工运动会邀请函
2014/01/19 职场文书
干部下基层实施方案
2014/03/14 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
职业规划实施方案
2014/06/10 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
经理聘任证明
2015/03/02 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
士兵突击观后感
2015/06/16 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript