jquery-ui可拖动干扰触摸滚动 - 腾讯云开发者社区

文章/答案/技术大牛

发布

探究 css touch-action 属性

当手势开始时，浏览器与触摸的元素及其所有祖先的触摸动作值相交直到一个实现手势（换句话说，第一个包含滚动元素）的触摸动作值。...这意味着在实践中，触摸动作通常仅适用于具有某些自定义行为的单个元素，而无需在该元素的任何后代上明确指定触摸动作。手势开始之后，触摸动作值的更改将不会对当前手势的行为产生任何影响。...禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。这是“pan-x pan-y pinch-zoom”（为了兼容性本身仍然有效）的别名。...请注意，滚动“向上”（pan-up）意味着用户正在将其手指向下拖动到屏幕表面上，同样 pan-left 表示用户将其手指向右拖动。...，但不想干扰网页的垂直滚动或缩放。

2.3K1 0

触屏事件

触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下： ? 2....触摸事件对象重点我们看三个常见对象列表：因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes 3.案例：移动端拖动元素 touchstart、touchmove、touchend...可以实现拖动元素但是拖动元素需要当前手指的坐标值我们可以使用 targetTouches[0] 里面的pageX 和 pageY 移动端拖动的原理：手指移动中，计算出手指移动的距离...然后用盒子原来的位置 + 手指移动的距离手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置拖动元素三步曲：（1）触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置...（2）移动手指 touchmove：计算手指的滑动距离，并且移动盒子（3）离开手指 touchend: 注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault

1.4K4 1

您找到你想要的搜索结果了吗？

是的

没有找到

触屏事件

触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下： 1.3.2....触摸事件对象重点我们看三个常见对象列表：因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes 1.3.案例：移动端拖动元素 touchstart、touchmove、touchend...可以实现拖动元素但是拖动元素需要当前手指的坐标值我们可以使用 targetTouches[0] 里面的pageX 和 pageY 移动端拖动的原理：手指移动中，计算出手指移动的距离...然后用盒子原来的位置 + 手指移动的距离手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置拖动元素三步曲：（1）触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置...（2）移动手指 touchmove：计算手指的滑动距离，并且移动盒子（3）离开手指 touchend: 注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault

1.3K2 0

移动端触屏事件

触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下： ? 2....，所以重点记住 targetTocuhes 3.案例：移动端拖动元素 touchstart、touchmove、touchend可以实现拖动元素但是拖动元素需要当前手指的坐标值我们可以使用...然后用盒子原来的位置 + 手指移动的距离手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置拖动元素三步曲：（1）触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置...（2）移动手指 touchmove：计算手指的滑动距离，并且移动盒子（3）离开手指 touchend: 注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault...+ moveX + 'px'; div.style.top = y + moveY + 'px'; e.preventDefault(); //阻止屏幕滚动的默认行为

3.7K3 0

JavaScript——触屏事件

触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。...正在触摸当前DOM元素上的手指的一个列表 changedTouches 手指状态发生了改变的列表，从无到有，从有到无变化移动端拖动元素 touchstart、touchmove、touchend可以实现拖动元素...但是拖动元素需要当前手指的坐标值我们可以使用targetTouchies[0]里面的pageX和pageY 移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离手指移动的距离...：手指滑动中的位置减去手指刚开始触摸的位置拖动元素三步曲：触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置移动手指touchmove：计算手指的滑动距离，并且移动盒子离开手指...touchend：注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault(); <!

2.7K1 0

【愚公系列】2023年12月 HarmonyOS教学课程 039-ArkUI事件（单一手势）

HarmonyOS中常见的手势操作及其功能：手势操作功能描述滑动手势在屏幕上快速滑动手指，可实现页面切换、滚动查看内容等功能点击手势轻触屏幕一次，可实现按钮点击、应用打开等功能双击手势连续快速点击屏幕两次...，可实现放大图片、双击打开应用等功能长按手势在屏幕上长时间按住手指，可弹出上下文菜单或进行拖拽、复制等操作捏合手势使用两个手指在屏幕上同时向内或向外移动，可实现缩放、放大和缩小等功能旋转手势...可实现快速滚动、切换页面等操作 1.点击手势（TapGesture）点击手势（TapGesture）是指用户在触摸屏幕上进行点击操作时的手势，通常是快速点击屏幕一次。...通过拖动手势，用户可以在屏幕上拖动某个对象，例如移动一个图像、滚动一个列表或调整一个视图的位置。拖动手势通常包括以下几个基本元素：起始点（起始位置）：用户触摸屏幕的初始位置。...滚动视图内容：用户可以在滚动视图中使用拖动手势来滚动内容，以浏览长列表或视图。双指拖动：有些应用程序支持双指拖动手势，通过同时滑动两个手指来实现某些特殊操作，例如旋转或缩放图像。

4571 0

前端成神之路-WebAPIs07

触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下： ?...因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes 1.1.3 移动端拖动元素 touchstart、touchmove、touchend 可以实现拖动元素但是拖动元素需要当前手指的坐标值...然后用盒子原来的位置 + 手指移动的距离手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置拖动元素三步曲：（1）触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置...手指滑动轮播图本质就是ul跟随手指移动，简单说就是移动端拖动元素触摸元素touchstart：获取手指初始坐标移动手指touchmove：计算手指的滑动距离，并且移动盒子...案例：返回顶部当页面滚动某个地方，就显示，否则隐藏点击可以返回顶部 1.3.2.案例分析滚动某个地方显示事件：scroll页面滚动事件如果被卷去的头部（window.pageYOffset ）

4K1 0

JavaScript之移动端网页特效(1)

touch对象代表一个触摸点,触摸点可能是一根手指,也可能是一根触摸笔.触屏事件可相应用户手指(或触控笔),对屏幕或者触控板操作常见的触屏事件如下: 试着写一下,切换成模拟手机调试再来试试触摸滑动事件...targetTouches 我们用targetTouches包含着一个数组,里面包含的是每根手指的各种属性和信息,targetTouches[0]可以看到第一个手指的一些属性: 网页拖动元素我们已经学会了...,手机也能拖动元素,我们现在要学习一下: 但是我们还要注意,触摸滑动是有默认的屏幕滚动的,就是说本来我只想拖动盒子,但是整个页面都滚动起来了....因为是移动端,所以可以使用CSS3的一些方法: 这样移动的话ul就不用加定位了现在试做一下: 后面接着做无缝滚动因为是ul在做过渡效果,所以我们给ul添加一个监听事件: 我们让他过渡完成后就打印一个...11 往左划也一样,但是现在还没做拖动效果下面要做小圆点跟随图片变化的效果,也引出了新的知识点: classList属性 classList属性是HTML5新增的一个属性,返回元素的类名

3.2K2 0

使用 React-DnD 打造简易低代码平台

“拖拽”实现关键词就是“拖拽”，其实“拖拽”的交互方式早在 Jquery 时代就有，关于拖拽在前端实现主要分为 2 种是以 jquery-ui 为代表的 draggable 和 Droppable...，其原理是通过鼠标事件 mousedown、mousemove、mouseup 或者触摸事件 touchstart、touchmove、touchend，记录开始位置和结束位置、以达到拖拽传递数据的效果... ) } 如果是手机端就要使用 react-dnd-touch-backend，因为 react-dnd-html5-backend不支持触摸...定义 JSON 接下来我们要：定义可拖动的组件类型每个组件类型对应的渲染组件每个组件的属性设置先来定义几个可拖动的字段吧，比如最基本的数据类型，div、h1、 p 标签都是一个组件，那就我先定义出以下字段类型...嵌套拖动基本组件一般可以嵌套的，比如我现在想要拖动出下图的页面效果实际上我需要生成 JSON 树，然后根据 JSON 树渲染出页面。

7.3K2 0

「JavaScript 」动画基础 - 03

触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。...触摸事件对象重点我们看三个常见对象列表：因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes 1.1.3 移动端拖动元素 touchstart、touchmove、touchend...可以实现拖动元素但是拖动元素需要当前手指的坐标值我们可以使用 targetTouches[0] 里面的pageX 和 pageY 移动端拖动的原理：手指移动中，计算出手指移动的距离。...然后用盒子原来的位置 + 手指移动的距离手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置拖动元素三步曲：触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置...案例：返回顶部当页面滚动某个地方，就显示，否则隐藏点击可以返回顶部 1.3.2.案例分析滚动某个地方显示事件：scroll页面滚动事件如果被卷去的头部（window.pageYOffset ）

1.6K2 0

jquery nicescroll 配置参数

div，默认值是9999 scrollspeed - 滚动速度，默认值为60 mousescrollstep - 高速滚动鼠标滚轮，默认值是40（像素） touchbehavior - 使光标拖动滚动像在台式电脑触摸设备...= TRUE）变焦激活时，双击对话框（默认：true） gesturezoom - （仅当boxzoom =真实，使用触摸设备）上缩放框激活时，间距输出/输入（默认：true） grabcursorenabled...iframeautoresize，在加载事件AUTORESIZE的iframe（默认：true） cursorminheight，设置在像素的最小光标高度（默认值：20） preservenativescrolling，您可以滚动本机可滚动区域用鼠标...（默认：true） sensitiverail，点击轨道上进行滚动（默认：true） enablemouselockapi，可以用鼠标说明锁的API（对象拖动同样的问题）（默认：true） cursorfixedheight...（默认值：6） nativeparentscrolling，检测内容底部，并让家长来滚动，作为原生滚动做（默认：true） enablescrollonselection，启用自动滚动的内容时，选择文本

5.3K8 0

移动端轮播图笔记

touch对象代表一个触摸点，触摸点可能是一根手指，也可能是一根笔。...手指从一个DOM元素上移开时触发 1.2触摸事件对象（TochEvent） TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。...，从有到无变化 1.3移动端拖动元素 1.touchstart、touchmove、touchend可以实现拖动元素 2.但是拖动元素需要当前手指的坐标值，我们可以使用targetTouches[0]里面的...pageX和pageY 3.移动端拖动的原理：手指移动中，计算出手指移动的距离。...然后用盒子原来的位置+手指移动的距离 4.手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置拖动元素三部曲：（1）触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置

3K2 1

jimojianghu

然而那能怎么办，用户第一，自然得快速解决这个问题，而且是触控板和触摸屏都得解决。在以前，如果要禁止移动端设备的触摸屏上，手指缩小放大的功能，都会想到使用viewport 来处理。...用于设置触摸屏用户如何操纵元素的区域，允许你在触控时控制滚动操作。例如，浏览器内置的缩放功能。这样做的好处还有，它可以允许你自己实现这些手势。...禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。触摸动作也经常用于完全解决由支持双击缩放手势引起的点击事件的延迟。 pinch-zoom 启用多手指平移和缩放页面。...请注意，滚动向上（pan-up）意味着用户正在将其手指向下拖动到屏幕表面上，同样 pan-left 表示用户将其手指向右拖动。...笔记本触摸板双指滑动，将响应滚轮事件，因此可以监听该事件，禁止触摸板手指缩放界面。但需要注意滚轮默认事件，如会导致子元素滚动失效，这时候就要在子元素上阻止相同事件冒泡。

4.7K0 0

前端成神之路-WebAPIs06

比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下： ? 1.3.2....触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。...因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes 1.3.3.案例：移动端拖动元素 touchstart、touchmove、touchend可以实现拖动元素但是拖动元素需要当前手指的坐标值...然后用盒子原来的位置 + 手指移动的距离手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置拖动元素三步曲：（1）触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置

1.6K4 0

Flutter完整开发实战详解(十八、神奇的ScrollPhysics与Simulation)

二、 ScrollPhysics 首先介绍 ScrollPhysics ，在 Flutter 官方的介绍中，ScrollPhysics 的作用是确定可滚动控件的物理特性，常见的有以下四大金刚： BouncingScrollPhysics...Tolerance get tolerance 上方代码标注了 ScrollPhysics 各个方法的大致作用，而在前面《十三、全面深入触摸和滑动原理》中，我们深入解析过触摸和滑动的原理，大致流程从触摸开始往下传递...这三个方法的触发时机在于 _handleDragUpdate 、 _handleDragCancel 和 _handleDragEnd ，也就是拖动过程和拖动结束的时机： applyPhysicsToUserOffset...这也是为什么普通慢速拖动，不会触发自动滚动的原因。...总结起来就是 ScrollPhysics 中控制了用户触摸转化和边界条件，并且在用户停止触摸时，利用 Simulation 实现了自动滚动与溢出回弹的动画效果。自此，第十八篇终于结束了！

16.6K6 1

移动端app开发问题及理解

onpropertychange 与oninput一样，ie专属 onkeyup 键盘按键抬起 onkeydown 键盘按键按下 contextmenu 弹出右键菜单 h5新加事件 ondrag 元素被拖动时运行的脚本...ondragend 在拖动操作末端运行的脚本 ondragenter 当元素已被拖动到有效拖放区域是运行的脚本 ondragleave 元素离开有效拖放目标时运行的脚本 ondragover...元素在有效拖放目标上正在被拖动时运行的脚本 ondragstart 在拖动操作开端运行的脚本 ondrop 当被拖元素正在被拖放是运行的脚本 onmousewheel 当鼠标滚轮整被滚动时 onscroll...元素滚动条被滚动时移动端事件有 click 单击事件类似于pc端click，移动端中，连续click触发有200ms-300ms的延迟 touch 触摸类事件 touchstart 手指触摸到屏幕触发...touchmove 手指在屏幕上移动触发 touchend 手指离开屏幕触发 touchcancel 可由系统进行的触发，比如手指触摸屏幕时，突然alert了，或者系统中其他打断了touch行为可触发

4.6K1 0

Android学习第七弹之手势操作

在昨天我们讲了Android的OnTouch触摸事件，有时候触摸和手势是相互联系的，密不可分的关系，所以上节我们讲了触摸事件，今天我们自然而然的就需要讲手势操作了。...android.view.GestureDetector.SimpleOnGestureListener 手势识别的接口类，使用他可以按需重载自己想要的方法，该类实现了 OnGestureListener接口，因此，通过该类可实现对手势的检测操作...使用他需要实现他所有的方法，该接口中定义了检测手势按下、按下未松开、轻击、滚动、长按、拖动等方法。...参数： el:滚动的起始坐标 e2:滚动的结束坐标 distanceX:滚动的横向巨离 distanceY:滚动的纵向距离按住 OnGestureListener.onShowPress(MotionEvent...e) 手指按在触摸屏上，它的时间范围在按下起效，在长按之前。

1.3K6 0

CreatorPrimer|飞机大战（一）

无限滚动背景滚动背景我们是使用最新的摄像机来实现，我这里做了一个卷轴摄像机组件ScrollCamera，我们先来看一下组件暴露的属性 ?...直接将这个组件拖动到场景编辑器或层级管理器即可，设置background节点为background分组 ?...通过上面的设置和ScrollCamera的十几代码，无限滚动背景就搞定了。 2....* 可拖动组件 */ cc.Class({ extends: cc.Component, onLoad() { //注册TOUCH_MOVE事件 this.node.on...触摸事件发生在foreground节点上，但移动的是target属性所指向的节点，看下面代码 /** * 可拖动组件 */ cc.Class({ extends: cc.Component,

1.6K2 0

手势魅力-设置一个触摸菜单

(touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,在处理移动端点击,拖动,滑动时,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js...那种让你用一只手盯着屏幕，另一只手放在你的额头上，另一只手放在鼠标上滚动的时间有 - 我敢说呢？ - 如丝般流畅的手势触摸手势和动画可能是一个挑战，并随着时间的推移变得越来越突出。...触摸属性列出当前在屏幕上的所有手指: PageX:返回手指放置在DOM中的x坐标。从左边开始计算,如果适用,则考虑水平滚动 PageY:返回手指放置在DOM中的y坐标。...所以,当你玩手机触摸手势,想想: 限制:你想要什么元素停止？您希望它在每次拖动时移动多远? 这个手势的方向:你想只能水平移动，或者还是垂直移动？也许是两个? 拖动完成后你想要发生什么？...这绝对不是你想要用你的手机触摸手势发生的事情，所以考虑一下：当你打开/关闭菜单时，你是否有兴趣阅读滚动隐藏的内容？如果你的拖拽方向是水平的，你就不能滚动 ? 我们需要一些边界在这里！

2.6K4 0

WPF 开启 ScrollViewer 的触摸滚动

在 ScrollViewer 如果需要收到触摸消息，通过 Manipulation 触摸滚动，不能只是通过设置 IsManipulationEnabled 方法，还需要设置 PanningMode 才可以...那么如何知道滚动条的触摸事件是否触发，可以写一个类继承滚动条 public class StisvearpaHudalserevow : ScrollViewer {...，简单一个界面，可以看到默认的滚动条是不能滚动的同时触摸的时候没有输出尝试添加 IsManipulationEnabled 方法可以看到有输出但是就是不能滚动在我博客 WPF 拖动滚动告诉大家通过 PanningMode 的方法可以让滚动条滚动只要在初始的过程设置了 PanningMode 因为在代码里面通过...SetCurrentValueInternal(IsManipulationEnabledProperty, BooleanBoxes.TrueBox); } } 但是如果在触摸的过程

1.1K1 0

点击加载更多

探究 css touch-action 属性

触屏事件

触屏事件

移动端触屏事件

JavaScript——触屏事件

【愚公系列】2023年12月 HarmonyOS教学课程 039-ArkUI事件（单一手势）

前端成神之路-WebAPIs07

JavaScript之移动端网页特效(1)

使用 React-DnD 打造简易低代码平台

「JavaScript 」动画基础 - 03

jquery nicescroll 配置参数

移动端轮播图笔记

jimojianghu

前端成神之路-WebAPIs06

Flutter完整开发实战详解(十八、神奇的ScrollPhysics与Simulation)

移动端app开发问题及理解

Android学习第七弹之手势操作

CreatorPrimer|飞机大战（一）

手势魅力-设置一个触摸菜单

WPF 开启 ScrollViewer 的触摸滚动

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐