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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 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 nl2br()格式化输出的详解
2013/06/05 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
利用Python实现图书超期提醒
2016/08/02 Python
详解python3中tkinter知识点
2018/06/21 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
基于python实现把图片转换成素描
2019/11/13 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
小班下学期评语
2014/05/04 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
财政局长个人总结
2015/03/04 职场文书
法律进社区活动总结
2015/05/07 职场文书
国情备忘录观后感
2015/06/04 职场文书
儿子满月酒致辞
2015/07/29 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书