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 tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vuex的使用步骤
Jan 06 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
如何优化vue打包文件过大
Apr 13 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
小谈php正则提取图片地址
2014/03/27 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
javascript计时器详解
2015/02/28 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
益模软件Java笔试题
2012/03/27 面试题
性能测试工程师的面试题
2015/02/20 面试题
车工岗位职责
2013/11/26 职场文书
学校元旦晚会方案
2014/02/19 职场文书
小学毕业演讲稿
2014/04/25 职场文书
给老婆的保证书范文
2014/04/28 职场文书
食品流通安全承诺书
2014/05/22 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers