关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件
当按下鼠标时,图片随鼠标移动松开时图片回到原位
drag("div_id")
function drag(node_id){
var node = document.getElementById(node_id);
var isYes = false;
document.onmousedown = function(even){
isYes = true;
var e = even || window.event;
node.style.left = e.clientX - 30 + "px";
node.style.top = e.clientY - 30 + "px";
}
document.onmousemove = function(even){
var e = even || window.event;
if(isYes){
node.style.left = e.clientX - 30 + "px";
node.style.top = e.clientY - 30 + "px";
}
}
document.onmouseup = function(){
isYes = false;
node.style.left = 0 + "px";
node.style.top = 0 + "px";
}
}
以下为在手机端的移动事件的函数封装
function drag(node_id){
var node = document.getElementById(node_id);
var isYes = false;
document.ontouchstart = function(even){
isYes = true;
var e = even || window.event;
node.style.left = e.clientX - 30 + "px";
node.style.top = e.clientY - 30 + "px";
}
document.ontouchmove = function(even){
var e = even || window.event;
if(isYes){
node.style.left = e.clientX - 30 + "px";
node.style.top = e.clientY - 30 + "px";
}
}
document.ontouchend = function(){
isYes = false;
node.style.left = 0 + "px";
node.style.top = 0 + "px";
}
}
以上为PC端与手机端的类似拖拽的函数封装
关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件的更多相关文章
- 判断浏览器是pc端还是手机端
1. 判断浏览器是pc端还是手机端 <script type="text/javascript"> var browser = { versions: function ...
- js 判断pc端或手机端
<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...
- 山西大同大学教务处教师端——可在PC端,手机端操作
解决问题:大同大学教务处官网教师端口一进去就卡住了,点上面一行的菜单无响应 下载方法(学生端 / 教师端 / 验证脚本): 链接:https://pan.baidu.com/s/1MWrJXoPzE ...
- 山西大同大学教务处学生端--送给学弟,学妹的礼物,可在PC端,手机端操作
解决问题:大同大学教务处官网学生端口一进去就卡住了,点上面一行的菜单无响应 转眼已是四年,想想自己大学即将结束,不由得让人感慨啊.这才刚开学几天,我就听到有同学在因为补考,选课的事情发愁.学校官方的教 ...
- 【工具】PC端调试手机端 Html 页面的工具
一.概述 有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...
- 判断是pc端还是手机端,并跳转到相应页面
<!-- 判断浏览器是否为手机端 --> <script> // class ! function(navigator) { var user ...
- Charles PC端和手机端抓取HTTP和HTTPS协议请求、HTTPS通用抓包规则
一:HTTP和HTTPS的区别 HTTP是超文本传输协议,被用在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,因此HTTP协议不适合传输一些敏感信息, ...
- tp5判断多模块下访问PC端和手机端
现在很多网站的手机端和PC端都是分开的模块,这是问题就来了,有些手机端的用户输入了PC端的网址,直接访问了PC端.下面我教大家如何实现手机端用户访问PC时,跳转回手机端. 解决方法:把下面的代码放到公 ...
- 自动PC端显示 手机端隐藏CSS代码判断实现
实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...
随机推荐
- 深入浅出学习Spring框架(四):IoC和AOP的应用——事务配置
在前文 深入浅出学习Spring框架(一):通过Demo阐述IoC和DI的优势所在. 深入浅出学习Spring框架(三):AOP 详解 分别介绍了Spring的核心功能——IoC和AOP,光讲知识远远 ...
- schemaeasyui实例:SSh结合Easyui实现Datagrid的分页显示
查了好多资料,发现还是不全,干脆自己整理吧,最少保证在我的做法正确的,以免误导读者,也是给自己做个记载吧! 克日学习Easyui,发现非常好用,界面很雅观.将学习的心得在此写下,这篇博客写SSh结合E ...
- swift 动态获取label宽度或高度
func getLabHeigh(labelStr:String,font:UIFont,width:CGFloat) -> CGFloat { let statusLabelText: NSS ...
- 一起来玩echarts系列(二)------echarts图表自适应问题
为了直观查看公司服务器各个进程占用的内存动态情况,我使用echarts进行数据可视化,具体的实现过程按下不表. 最后实现的效果如图: 然后问题就来了,因UI采用了Bootstrap响应式框架,所以除了 ...
- js获取菲波那契数列的第N个元素
菲波那契数列,大致可以描叙为a(n) = a(n-1) + a(n-2) (a >=2).类似于这样[1, 1, 2, 3, 5, 8, 13 ...]. 具体大家可以百度一下.下面我们来用js ...
- JS监听页面关闭
JS可以监听浏览器页面的关闭,主要使用了window对象的onbeforeunload方法 在以前(旧版本的浏览器中),可以自定义提示文案 window.onbeforeunload = functi ...
- PHP之MYSQL数据库
MYSQL数据库简介 1.什么是数据库? 数据库(database) 就是一个由一批数据构成的有序集合,这个集合通常被保存为一个或多个彼此相关的文件. 2.什么是关系型数据库? 数据被分门别类的存 ...
- java转发和重定向
1,请求重定向:客户端行为,response.sendRedirect(),从本质上讲等同于两次请求,前一次的请求对象不会保持,地址栏的URL地址会改变.2,请求转发:服务器行为,request.ge ...
- 为什么需要DevOps
过去一年以来,一批来自欧美的.不墨守陈规的系统管理员和开发人员一直在谈论一个新概念:DevOps.DevOps 就是开发(Development) 和运维(Operations)这两个领域的合并.(如 ...
- 图像预处理(Evision)
Convolution //采用线性过滤Linear combination of neighboring pixels using a convolution kernel−Pre-defined ...