PC鼠标拖动滑块转变为手机手指滑动滑块

在PC端可以用mousedown来触发一个滑块滑动的效果，但在手机上，貌似无法识别这个事件，但手机上有touchstart事件，可以通过一系列“touch”事件来替代PC端的“mouse”事件。

原来的 PC端 使用的代码：

var mousex = 0;
var divLeft;//触发滑块拖动
$('#rangeBtn').bind('mousedown',function(e){mousex = e.pageX;divLeft = $(this).position().left;//绑定滑块移动事件$(this).bind('mousemove',dragElement);
});//结束滑块移动
$(document).bind('mouseup',function(){$('#rangeBtn').unbind('mousemove');
});/*** 函数：拖动滑块
**/
function dragElement(event) {var left = divLeft + (event.pageX - mousex);if (left < 0) {left = 0;} else if (left > width) {left = width;}$(this).css({'left' : left + 'px'});return false;
}

转变为 移动端 使用的代码：

var mousex = 0;
var divLeft;//触发滑块拖动
$('#rangeBtn').bind('touchstart',function(e){mousex = e.originalEvent.targetTouches[0].pageX;divLeft = $(this).position().left;//绑定滑块移动事件$(this).bind('touchmove',dragElement);
});//结束滑块移动
$(document).bind('touchend',function(){$('#rangeBtn').unbind('touchmove');
});/*** 函数：拖动滑块
**/
function dragElement(event) {var left = divLeft + (event.originalEvent.targetTouches[0].pageX - mousex);if (left < 0) {left = 0;} else if (left > width) {left = width;}$(this).css({'left' : left + 'px'});return false;
}

比较两段代码可以轻易看出：
- touchstart 对应 mousedown
- touchmove 对应 mousemove
- mouseup 对应 touchend
但是，如果只切换这三个单词并没有实现滑动效果，探究了很长时间后发现要将
- e.pageX 切换成 e.originalEvent.targetTouches[0].pageX
才能真正实现移动端滑块随手指滑动。

PC鼠标拖动滑块转变为手机手指滑动滑块相关推荐

JS拖动事件（鼠标拖动事件）手指事件（PC移动端拖拽）
写了好几次的PC端和移动端的拖拽效果了,每次都要重新查阅资料,现在做个总结记录,方便以后随时查阅要想写拖拽事件,首先得了解三块知识点: PC的鼠标拖动事件移动端的手指事件能拿到被移动元素的高宽, ...
通过PC鼠标键盘操控Android手机：androidscreencast.jnlp应用
通过PC鼠标键盘操控手机:androidscreencast.jnlp应用使用androidscreencast.jnlp,可通过鼠标和键盘操作手机,并且可实时将手机屏幕传回电脑端,还可录屏,也可浏 ...
python模拟鼠标拖动滑块_py+selenium拼图式拖动滑块的验证
我这边是前端提供了随机生成缺口的位置,只适合部分人先定位到需要移动的滑块位置, 应为我这边随机生成的缺口位置是display:none无法获取元素所以要先修改成block才能读取这里有一个坑就是如 ...
Vue实战教程：利用自定义实现鼠标拖动元素效果
一淘模板分享一个Vue实战,介绍下使用Vue的自定义指令实现鼠标拖动元素的效果以及解决移动端适配的问题. 核心属性 Element.clientWidth:元素可视宽度. Element.client ...
jquery 鼠标拖动排序Li或Table
1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...
PyQt5教程(十二)——实现QQ登录界面（六、实现鼠标拖动界面，鼠标事件）
PyQt5教程(十二)--实现QQ登录界面(五.实现鼠标拖动界面,鼠标事件) 一.实现界面可以随着鼠标进行拖动 1.主要就是对鼠标事件的实现: def mousePressEvent(self, ev ...
用鼠标拖动图片的JS代码
代码简介: 用鼠标拖动一个图片移动,就像拖动一个层一样,这是一个JS拖动类代码,你可以无限制的增加图片,代码复用率比较高. 代码内容: View Code <html><HEAD&g ...
基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
wxpython实现鼠标拖动事件
wxpython鼠标拖动事件小案例: #coding:UTF-8 import wxapp = wx.App() def dragEVT(event):if event.ButtonDown():pa ...

PC鼠标拖动滑块转变为手机手指滑动滑块

PC鼠标拖动滑块转变为手机手指滑动滑块

PC鼠标拖动滑块转变为手机手指滑动滑块相关推荐

最新文章

热门文章

PC鼠标拖动滑块 转变为 手机手指滑动滑块

PC鼠标拖动滑块 转变为 手机手指滑动滑块

PC鼠标拖动滑块 转变为 手机手指滑动滑块相关推荐

最新文章

热门文章

PC鼠标拖动滑块转变为手机手指滑动滑块

PC鼠标拖动滑块转变为手机手指滑动滑块

PC鼠标拖动滑块转变为手机手指滑动滑块相关推荐