关于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 ...
随机推荐
- SQL Server监控清单
SQL Server监控清单 一. 服务器1. 状态监控(1) 服务器是否可访问?(2) 相应的数据库服务是否启用?(3) 操作系统事件日志中的错误或告警(4) 磁盘可用空间 服务器状态监控,不管使用 ...
- 性能测试工具比较:LoadRunner vs JMeter - 测试结果数据比较
对web请求(HTTP/HTML)进行性能测试,确认请求响应时间.分别使用Loadrunner和JMeter进行测试,比较测试结果. 1.LoadRunner测试web请求响应时间 1.1 编制(录 ...
- Eclipse 4.3正式版发布
Eclipse 4.3正式版发布 作者:chszs,转载需注明.博客主页: http://blog.csdn.net/chszs Eclipse 4.3版代号为Kepler. 主要特性如下: 1. E ...
- Springmvc中配置Quartz使用,实现任务实时调度。
菜鸡的自我修炼,第一次接触quartz,做个记录.-------jstarseven 最近在项目中,第一次在springmvc中配置实用quartz,深刻的感受到quartz带来的方便,顺手做个记录. ...
- 微信小程序开源项目库汇总
最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...
- gRPC helloworld service, RESTful JSON API gateway and swagger UI
概述 本篇博文完整讲述了如果通过 protocol buffers 定义并启动一个 gRPC 服务,然后在 gRPC 服务上提供一个 RESTful JSON API 的反向代理 gateway,最后 ...
- 【CSS学习】字符实体
在html开发中,有一些字符,不适于直接写出,比如:大于号>小于号<<br />一般格式:&+实体名+;实体有很多,记住常用的大于号>小于号<双引号&quo ...
- 《Dynamic Topic Detection and Tracking: A Comparison of HDP, C-Word, and Cocitation Methods》笔记
原文地址:http://onlinelibrary.wiley.com/doi/10.1002/asi.23134/abstract 黄色背景是我认为比较重要的,红色字体是我自己的话. 动态主题监测与 ...
- CentOS 7安装SVN以及高版本SVN
安装 CentOS 7 下yum命令即可方便的完成安装 $ sudo yum install subversion 测试安装是否成功: $ svnserve --version 建立版本库 创建svn ...
- 第12章 MySQL高级管理
1.手动更新权限后,需向服务器指出已对权限进行修改: (在MySQL提示符下)flush privileges; 2.查看用户所拥有的权限: 如: show grants for bookorama; ...