vue - 移动端实现对div的拖动功能

移动端实现对div的拖动功能,需要先要知道以下移动端的一些原生事件和方法;本质上和pc端的操作是一样的;

pc端实现对div的拖动功能 :链接

事件

方法描述
touchstart触摸元素时触发
touchmove元素滑动时触发
touchend触摸元素抬起时触发

方法

方法描述
event.targetTouches[0].pageX当前手指的X轴坐标,相对于浏览器页面或窗口
event.targetTouches[0].pageY当前手指的Y轴坐标,相对于浏览器页面或窗口
event.offsetLeft只读属性,返回当前元素左边框距定位元素(或者最近的元素) 左侧的像素值
event.offsetTop只读属性,返回当前元素上边框距定位元素(或者最近的元素) 顶部的像素值
event.offsetHeight只读属性,它返回该元素的像素高度,高度包含内边距(padding)和边框(border),不包含外边距(margin),是一个整数,单位是像素 px
event.offsetWidth同上,返回该元素的像素宽度

注意:手指移动也会触发滚动屏幕(如果宽度溢出出现滚动条的话),所以要阻止默认的屏幕滚动 event.preventDefault();

拖动原理

主要是改变定位元素的定位值来实现位置的移动;定位值 = 手指滑动中的位置 - 手指刚触摸时候的初始位置 和距离限制;

实现代码:

<template>
  <!-- 移动端拖拽实现 -->
  <div class="dropContainer">
    <div id="Drop" :style="style" @touchmove="touchmove($event)" @touchstart="touchstart($event)" class="drop"></div>
  </div>
</template>

<script>
export default {
  name: "dropContainer",
  data() {
    return {
      DropEl: null,
      dropContainer: null,
      // 元素未拖动时的初始位置 绑定的是行内样式
      style: {
        top: "100px",
        left: "100px"
      },
      // 位置差
      disX: 0,
      disY: 0
    };
  },
  computed: {},
  mounted() {
    // 获取元素
    this.DropEl = document.getElementById("Drop");
    this.dropContainer = document.getElementsByClassName("dropContainer")[0];
  },
  methods: {
    // 手指落下时触发
    touchstart(event) {
      // 1,计算位置差 因为clientX和offsetLeft的属性返回的位置不一样 要相减得到拖动元素内实际点击的位置
      // pageX 永远大于等于 offsetLeft pageY也是同理
      this.disX = event.targetTouches[0].pageX - this.DropEl.offsetLeft;
      this.disY = event.targetTouches[0].pageY - this.DropEl.offsetTop;
    },

    // 手指移动时触发
    touchmove(event) {
      // 2,获取手指移动的实时位置  需要减去位置差
      let moveX = event.targetTouches[0].pageX - this.disX;
      let moveY = event.targetTouches[0].pageY - this.disY;

      // 3,获取容器的宽高和拖动元素的宽高  每一次移动都会获取一次 ,建议放在外面进行获取
      let dragHeight = this.DropEl.offsetHeight;
      let dragWidth = this.DropEl.offsetWidth;
      let dragContainerWidth = this.dropContainer.offsetWidth; //获取容器的高度和宽度
      let dragContainerHeight = this.dropContainer.offsetHeight;

      // 4,控制范围:在元素 被拖拽的过程中 判断 元素的定位值 是否到达边界 如果到了 就不能在走了
      if (moveX <= 0) {
        moveX = 0;
      }
      // 上边界
      if (moveY <= 0) {
        moveY = 0;
      }
      //下边界  容器高度 - 拖动元素高度
      if (moveY >= dragContainerHeight - dragHeight) {
        moveY = dragContainerHeight - dragHeight;
      }
      //右边界   容器宽度 - 拖动元素宽度
      if (moveX >= dragContainerWidth - dragWidth) {
        moveX = dragContainerWidth - dragWidth;
      }
      // 5,开始移动
      this.style.left = moveX + "px";
      this.style.top = moveY + "px";
    }
  }
};
</script>

<style lang="scss" scoped>
.dropContainer {
  width: 100%;
  height: 100vh;
}
.drop {
  position: fixed;
  width: 30px;
  height: 30px;
  border: 5px solid red;
  border-radius: 50%;
  background-color: red;
  text-align: center;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/17054.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

不能使用chatGPT?这3个平替甚至比chatGPT更强

不能使用chatGPT&#xff1f;这3个平替甚至比chatGPT更强 chatGPT&#xff0c;一款由OpenAI开发的新型AI聊天机器人&#xff0c;正在势如破竹地改变着许多人的工作和生活方式。作为一款基于大语言模型的聊天机器人&#xff0c;chatGPT能够理解自然语言并进行人机对话。与传统的…

用于scATAC-seq有监督分类的Cellcano

细胞类型识别是单细胞数据分析的基本步骤。由于高质量参考数据集的可用性&#xff0c;有监督细胞分类方法在scRNA-seq数据中很受欢迎。染色质可及性分析&#xff08;scATAC-seq&#xff09;的最新技术进步为理解表观遗传异质性带来了新的见解。随着scATAC-seq数据集的不断积累&…

html5地理位置信息介绍, 百度地图使用

文章目录 1. HTML5中地理信息API1.1 Geolocation 接口 2. 在vue中使用百度地图3. 在react中使用百度地图 1. HTML5中地理信息API HTML5 的地理位置 API 可以让你获取用户的地理位置信息&#xff0c;并将其用于许多不同的应用场景&#xff0c;例如&#xff1a; 在地图上显示用…

钴基双金属氧化物储能材料的高效制备和电化学应用

一、引言 钴金属氧化物作为一类典型的储能材料&#xff0c;既可以用于锂离子电池负极材料&#xff0c;又可以用于超级电容器电极材料&#xff0c;因而备受关注 。在作为锂离子电池负极材料时&#xff0c;具有较高的理论比容量&#xff0c;但充放电体积变化较大、材料导电性较差…

爬虫为什么需要ip

爬虫需要使用爬虫ip主要是为了解决以下问题&#xff1a; 1、反爬虫机制&#xff1a;许多网站会设置反爬虫机制来防止爬虫程序的访问&#xff0c;例如限制IP地址的访问频率、检测访问来源等。使用爬虫ip可以绕过这些限制&#xff0c;使得爬虫程序更难被检测到。 2、访问限制&a…

浅拷贝和深拷贝

浅拷贝&#xff1a; 定义&#xff1a;浅拷贝&#xff08;Shallow Copy&#xff09;是一种简单的对象复制方式&#xff0c;将一个对象的数据成员直接复制给另一个对象&#xff08;通常是通过默认的复制构造函数或赋值运算符实现&#xff09;&#xff0c;这些数据成员可以是基本…

JavaScript:字符串

文章目录 字符串344. 反转字符串reverse() 方法&#xff08;打基础的时候&#xff0c;不要太迷恋库函数&#xff09;代码及思路 541. 反转字符串 IIJavaScript String split() 方法JavaScript Array join() 方法代码分析见注释 剑指 Offer 05. 替换空格思路注意&#xff1a;上面…

网络基础学习:什么是网络与网络发展史

什么是网络与网络发展史 什么是网络&#xff1f;什么是网络发展史&#xff1f;分组交换技术TCP/IP技术Web技术ARPANET&#xff08;1969年&#xff09;Internet&#xff08;1983年&#xff09;万维网&#xff08;1990年&#xff09;移动互联网&#xff08;2007年&#xff09;物联…

KDGK-F断路器机械特性测试仪

一、产品概述 KDGK-F 断路器机械特性测试仪可用于各电压等级的真空、六氟化硫、少油、多油等电力系统高压开关的机械特性参数测试与测量。测量数据稳定&#xff0c;抗干扰性强&#xff0c;可在500KV等级及以下电站做实验&#xff0c;接线方便&#xff0c;操作简单&#xff0c;是…

第14章 项目采购管理

文章目录 采购管理包括如下几个过程14.2 编制采购计划 462编制采购计划的输出1&#xff09;采购管理计划2&#xff09;采购工作说明书3&#xff09;采购文件 14.2.3 工作说明书&#xff08;SOW&#xff09; 14.3 实施采购 47414.3.2 实施采购的方法和技术 476&#xff08;1&…

No.054<软考>《(高项)备考大全》【冲刺8】《软考之 119个工具 (6)》

《软考之 119个工具 &#xff08;6&#xff09;》 99.应急应对策略:100.风险在评估:101.风险审计:102.偏差和趋势分析:103.技术绩效测量:104.自制或外购分析:105.市场调研:106.投标人会议:107.建议书评价技术:108.独立核算:109.广告:110.采购谈判:111.合同变更控制系统:112.采购…

ArduPilot之GPS Glitch问题M8N模块配置

ArduPilot之GPS Glitch问题&M8N模块配置 1. 源由2. 现象3. 视频分析3.1 配置&#xff08;不理想&#xff09;3.2 配置优化3.3 优化配置短时间3D LockGlitch3.4 优化配置长时间3D DGPS Lock3.5 使用尽量多的卫星系统3.5.1 配置一3.5.2 配置二 3.6 同一时间段&#xff08;M8N…

3.3 泰勒公式例题分析

例1 写出函数f(x)带有拉格朗日余项的n阶麦克劳林公式 我的答案&#xff1a; 一、信息 1.f(x)的表达式 2.目标求这个f(x)的n阶麦克劳林公式 二、分析 条件1&#xff1a;告诉我f(x)的表达式为我后续带入公式做准备 条件2&#xff1a;告诉我用什么公式和此次求解的方向 三…

平面设计师都在用的设计素材网站,免费下载~

很多新手设计师不知道去哪里找高清、免费的设计素材&#xff0c;今天我就给大家推荐5个设计素材网站&#xff0c;免费下载&#xff0c;赶紧收藏起来把&#xff01; 1、菜鸟图库 https://www.sucai999.com/?vNTYwNDUx 菜鸟图库是我推荐过很多次的网站&#xff0c;主要是站内素…

普通2本,去过字节外包,到现在年薪25W+的测试开发,我的2年转行心酸经历...

个人简介 我是一个普通二本大学机械专业毕业&#xff0c;17年毕业&#xff0c;19年转行&#xff0c;目前做IT行业的软件测试已经有3年多&#xff0c;职位是高级测试工程师&#xff0c;坐标上海… 我想现在我也有一点资格谈论关于转行这个话题&#xff1b;希望你在决定转行之前…

unity-VRTK-simulator开发学习日记2(抛物线 导包|使用|调用方法)

导包 使用抛物线 1.层级目录下添加抛物线曲线 曲线上面那个是直线 2.将跟踪控制器 给到抛物线的“跟随资源” &#xff08;选择哪只手射出射线&#xff09; 3.激活按键 找到模拟手柄按键 找到simulator的交互的几个按键&#xff08;ButtonOne为例&#xff09; value&#x…

从4k到42k,软件测试工程师的涨薪史,给我看哭了

清明节一过&#xff0c;盲猜大家已经无心上班&#xff0c;在数着日子准备过五一&#xff0c;但一想到银行卡里的余额……瞬间心情就不美丽了。 最近&#xff0c;2023年高校毕业生就业调查显示&#xff0c;本科毕业月平均起薪为5825元。调查一出&#xff0c;便有很多同学表示自己…

第六章 Iptables与Firewalld防火墙

第六章 Iptables与Firewalld防火墙 一、Iptables 1、策略与规则链 &#xff08;1&#xff09;、防火墙策略规则的设置 一种是“通”即放行&#xff0c;另一种是“堵”即阻止。 当防火墙的默认策略为拒绝时&#xff08;堵&#xff09;&#xff0c;就要设置允许规则通&#x…

[论文笔记] In Search of an Understandable Consensus Algorithm (Extended Version)

In Search of an Understandable Consensus Algorithm (Extended Version) 寻找可理解的共识算法 (扩展版) [Extended Paper] [Original Paper] ATC’14 (Original) 摘要 Raft 是一个用于管理复制日志的共识算法. Raft 更易于理解, 且为构建实际的系统提供了更好的基础. Raf…

Redis 基础

0. Redis 基础 如果对 Redis 还不了解的同学可以先看一下这篇 Redis 基础文章 &#xff0c;这里面介绍了 Redis 是什么&#xff0c;以及怎么用 1. Redis 管道 我们通常使用 Redis 的方式是&#xff0c;发送命令&#xff0c;命令排队&#xff0c;Redis 执行&#xff0c;然后返…
最新文章