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实现图片裁剪后上传
Dec 16 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
QQ登录简单实现代码
2021/03/09 Javascript
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
Python中的探索性数据分析(功能式)
2017/12/22 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
python实现3D地图可视化
2020/03/25 Python
德国团购网站:Groupon德国
2018/03/13 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
十八届三中全会感言
2014/03/10 职场文书
颁奖晚会主持词
2014/03/25 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
爱的承诺书
2015/01/20 职场文书
工程质检员岗位职责
2015/04/08 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
Python数据处理的三个实用技巧分享
2022/04/01 Python