单点拖拽和多点多拽

demo见github:https://github.com/fei1314/drag/tree/master

一、拖拽原理手指所处的位置到一个div顶部的距离L一直不变。
二、单点拖拽1.touchstart:单指按下2.touchmove:单指移动3.touchend:单指抬起a.在touchstart事件中,利用拖拽原理,先保存手指到div顶部的距离。X轴方向上,手指的坐标ev.targetTouches[0].pageX,div到浏览器左边的距离offsetLeft。两者距离之差保持不变。就是let disX=ev.targetTouches[0].pageX-oBox.offsetLeft;同理,Y轴方向上也是,即let disY=ev.targetTouches[0].pageY-oBox.offsetTop;b.如果出现滚动条,在拖拽div的时候,滚动条也会随之滚动,所以要阻止默认事件。一般我们会添加ev.preventDefault();或者ev.cancelBubble=true; 在移动端需要两个都添加上c.在手指移动过程中,需要touchmove事件,移动过程中手指的坐标是ev.targetTouches[0].pageX,div到浏览器的X轴距离就是ev.targetTouches[0].pageX减去disX。同理,Y轴方向也是如此。d.在手指抬起的时候,触发touchend事件,此时要把touchmove和touchend事件清除掉。用removeEventListener事件
三多点拖拽
原理和单点拖拽基本一样。不同的是在手指抬起的时候,因为是多指,不知道是抬起的是哪个。
此时有ev.targetTouches[0].identifier;指的是id。先保存起来。
在touchend事件中,ev.changedTouches表示已经抬起的手指,我们先设置一个标识found=false表示手指没有抬起,再判断ev.changedTouches中的identifier和之前保存的identifier一样,则表示这个identifier抬起来了。此时就清除touchmove和touchend事件。

 

转载于:https://www.cnblogs.com/chaofei/p/7966478.html

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

伪代码是计算机语言,伪代码书写格式

《伪代码书写格式》由会员分享,可在线阅读,更多相关《伪代码书写格式(3页珍藏版)》请在人人文库网上搜索。1、精品文档伪代码伪代码是用介于自然语言和计算机语言之间的文字和符号来描述算法。每一行(或几行)表示一个基本操作。它不用图形符号&#xff0…

JDBC连接Mysql数据库

注释:(以下代码会抛出多个异常,仅表达出JDBC连接Mysql数据库的过程步骤)加载数据库驱动(即 实例化驱动类对象)Class.forName("com.mysql.cj.jdbc.Driver"); 获取数据库的连接Connection conn null; conn DriverManage…

Elasticsearch:用于内容丰富的文本分析

每个文本搜索解决方案都与其提供的文本分析功能一样强大。 Lucene是这样的开源信息检索库,提供了许多文本分析的可能性。 在本文中,我们将介绍ElasticSearch提供的一些主要文本分析功能,这些功能可用来丰富您的搜索内容。 内容丰富 以一个典…

[CSS] Scale on Hover with Transition

效果 源码 <!doctype html><html class"outline color"><head><meta charset"utf-8"><title>图片scale动画</title><style>.img-box {position: relative;width: 740px;height: 420px;overflow: hidden;}/* 彩色…

热敏电阻温度特性曲线_热敏电阻与体温计的应用关系

相信体温计大家都熟悉&#xff0c;热敏电阻与体温计的应用关系大家都知道吗&#xff1f;热敏电阻热敏电阻探头测量体温的原理又是什么呢&#xff0c;小编跟大家分析一下&#xff0c;希望以下详细的介绍能帮助到大家&#xff01;热敏电阻探头测量体温的原理分析如下&#xff1a;…

js总结

var a {"name": "Alex", "age": 18}; console.log(a.name); console.log(a["age"]);就是字典&#xff0c;for (var i in a ){     console.log(a[i])}var anew Object()a.name"egon";a.age18;ES6中新增了map数据结构&…

计算机公共基础知识教材,国家计算机二级考试公共基础知识教材

国家计算机二级考试公共基础知识教材国家计算机二级考试公共基础知识教材国家计算机二级考试公共基础知识教材公共基础知识总结之第一章数据结构与算法 ................................................................................. 1公共基础知识总结之第二章程序设计…

1.Strategy Pattern(策略模式)

策略模式&#xff08;Strategy Pattern&#xff09;&#xff1a; 我的理解&#xff0c;将代码中每个变化之处抽出&#xff0c;提炼成一个一个的接口或者抽象类&#xff0c;让这些变化实现接口或继承抽象类成为具体的变化类。再利用多态的功能&#xff0c;可将变化之处用接口或抽…

Spring MVC + Hibernate + Maven:CRUD操作示例

在本文中&#xff0c;我想研究一个Spring MVC Hibernate Maven用法的示例。 这套技术暗含领域领域的基础知识。 因此&#xff0c;我将尝试详细解释所有重要时刻。 其他没有主题的内容将提供指向更多详细信息源的链接。 在文章的结尾&#xff0c;我将发布GitHub的链接。 目标…

画出的点做交互_设计之下交互设计原型设计之概念设计

目录//交互设计//「设计之下」---交互设计&#xff1a;交互设计师是做什么的&#xff1f;上线的产品中那一块是交互设计师的产物呢&#xff1f;项目启动1.1「设计之下」---交互设计&#xff1a;项目启动之从想法到项目&#xff0c;什么是项目&#xff1f;1.2「设计之下」---交互…

Java集合之TreeMap源码解析上篇

上期回顾 上期我从树型结构谈到了红黑树的概念以及自平衡的各种变化&#xff08;指路上期←戳&#xff09;&#xff0c;本期我将会对TreeMap结合红黑树理论进行解读。 首先&#xff0c;我们先来回忆一下红黑树的5条基本规则。 1.结点是红色或者黑色&#xff0c; 2.根结点为黑色…

CSS3 Transform、Transition和Animation属性总结

CSS3的三个与变形和动画啊相关的属性&#xff1a; Transform 浏览器支持情况&#xff1a; Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性&#xff08;仅适用于 2D 转换&#xff09;。 Safari 和 Chrome…

综合云平台 - 前言 - 00

因为学习了 RHCA 云方向, 目前已经学了: CL210 OpenStack 私有云技术 CL220 CFME 混合云管理平台 RH236 GlusterFS 分布式存储 RH413 Hardening 安全 RH442 Performance Tuning 调优 RH318 Red Hat Enhanced Virtualization 虚拟化(传统虚拟机) DO280 OpenS…

15秋计算机基础作业3,东师15秋《计算机应用基础》在线作业3介绍.doc

计算机应用基础15秋在线作业3一、单选题(共?25?道试题&#xff0c;共?62.5?分。)V1.??国标码与机内码之间区别是A. 在机器内所占存储单元不同B. 机内码是ASCII码&#xff0c;国标码为非ASCII码C. 国标码是个每个字节最高位为1&#xff0c;机内码每个字节最高位为1D. 机内…

在Java中使用DOM,SAX和StAX解析器解析XML

我碰巧通读了有关Java中的XML解析和构建API的章节。 我试用了样本XML上的其他解析器。 然后&#xff0c;我想在我的博客上分享它&#xff0c;这样我就可以参考该代码以及任何阅读此书的参考。 在本文中&#xff0c;我将在不同的解析器中解析相同的XML&#xff0c;以执行将XML内…

仪器和软件通讯测试软件,软件定义的仪器-测试测量-与非网

如同每个孩子所拥有的第一套LEGO玩具改变了他们对世界的认识一样&#xff0c;26年前&#xff0c;美国国家仪器通过NI LabVIEW系统设计软件&#xff0c;重新改变了人们对仪器的认知。今年&#xff0c;NI将再次重演历史&#xff0c;发布一款新型仪器&#xff0c;帮助测试工程师摆…

埃森哲杯第十六届上海大学程序设计联赛春季赛暨上海高校金马五校赛 C序列变换...

链接&#xff1a;https://www.nowcoder.com/acm/contest/91/C来源&#xff1a;牛客网没有账号的同学这样注册&#xff0c;支持博主 题目描述 给定两个长度为n的序列&#xff0c;ai, bi(1<i<n), 通过3种魔法使得序列a变换为序列b&#xff0c;也就是aibi(1<i<n). 魔…

ubuntu安装gnome桌面

1. apt install gnome-shell2. apt install ubuntu-gnome-desktop3. apt install unity-tweak-tool4. apt install gnome-tweak-tool转载于:https://www.cnblogs.com/regit/p/7978365.html

Spring MVC,Ajax和JSON第1部分–设置场景

我一直在考虑在Spring&#xff0c;Ajax和JSON上写博客&#xff0c;但是我从来没有做过。 这主要是因为它非常复杂&#xff0c;并且所需的技术一直处于变化状态。 当我决定撰写此博客时&#xff0c;我在Internet上有一个侦察员&#xff0c;如果您查看诸如Stack Overflow之类的地…

oracle 运营维护_Oracle数据库日常运维常用脚本

大中小Oracle数据库日常运维常用脚本1 查看所有数据文件select file_name from dba_data_filesunionselect file_name from dba_temp_filesunionselect name from v$controlfileunionselect value from v$parameter where namespfileunionselect member from v$logfile;2 查看正…