当按下鼠标时,图片随鼠标移动松开时图片回到原位

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端与手机端随着手指移动图片位置放生变化的拖拽事件的更多相关文章

  1. 判断浏览器是pc端还是手机端

    1. 判断浏览器是pc端还是手机端 <script type="text/javascript"> var browser = { versions: function ...

  2. js 判断pc端或手机端

    <script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...

  3. 山西大同大学教务处教师端——可在PC端,手机端操作

    解决问题:大同大学教务处官网教师端口一进去就卡住了,点上面一行的菜单无响应 下载方法(学生端 / 教师端  / 验证脚本): 链接:https://pan.baidu.com/s/1MWrJXoPzE ...

  4. 山西大同大学教务处学生端--送给学弟,学妹的礼物,可在PC端,手机端操作

    解决问题:大同大学教务处官网学生端口一进去就卡住了,点上面一行的菜单无响应 转眼已是四年,想想自己大学即将结束,不由得让人感慨啊.这才刚开学几天,我就听到有同学在因为补考,选课的事情发愁.学校官方的教 ...

  5. 【工具】PC端调试手机端 Html 页面的工具

    一.概述 有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...

  6. 判断是pc端还是手机端,并跳转到相应页面

    <!-- 判断浏览器是否为手机端 -->  <script>     // class     ! function(navigator) {         var user ...

  7. Charles PC端和手机端抓取HTTP和HTTPS协议请求、HTTPS通用抓包规则

    一:HTTP和HTTPS的区别 HTTP是超文本传输协议,被用在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,因此HTTP协议不适合传输一些敏感信息, ...

  8. tp5判断多模块下访问PC端和手机端

    现在很多网站的手机端和PC端都是分开的模块,这是问题就来了,有些手机端的用户输入了PC端的网址,直接访问了PC端.下面我教大家如何实现手机端用户访问PC时,跳转回手机端. 解决方法:把下面的代码放到公 ...

  9. 自动PC端显示 手机端隐藏CSS代码判断实现

    实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...

随机推荐

  1. PHP动态图像的创建要如何实现呢?

    with-gd=[/path/to/gd] --with-jpeg-dir=[/path/to/jpeg-6b] --with-t1lib=[/path/to/t1lib]  完成添加后执行make命 ...

  2. iOS iPad开发之UIPopoverController的使用

    1. 什么是UIPopoverController? 是iPad开发中常见的一种控制器(在iphone上不允许使用) 跟其他控制器不一样的是,它直接继承自NSObject,并非继承自UIViewCon ...

  3. 性能比较工具runstats

    runstats能对做同一件事的两个不同方法进行比较,得出谁好一点.我们只需要提供两个不同方法,余下的事情都由runstats负责.runstats只是测量3个要素: 1. 耗用的时间. 2. 系统统 ...

  4. api接口的记录

    http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1& ...

  5. X-Forwarded-For 的一些理解

    X-Forwarded-For 是一个 HTTP 扩展头部, 主要是为了让 Web 服务器获取访问用户的真实 IP 地址(其实这个真实未必是真实的,后面会说到). 那为什么 Web 服务器只有通过 X ...

  6. u3d中的向量 vector3 vector2

    Vector3(x,y,z)x代表左右,y代表上下,z代表前后 Vector3.magnitude 长度 计算两点之间的距离  .如果只给了一点的话.算出的长度其实就是和Vector3.zero点之间 ...

  7. mybatis中使用mysql的模糊查询字符串拼接(like)

    方法一: <!-- 根据hid,hanme,grade,模糊查询医院信息--> 方法一: List<Hospital> getHospitalLike(@Param(" ...

  8. Angular学习笔记—HttpClient (转载)

    HttpClientModule 应用 导入新的 HTTP Module import {HttpClientModule} from '@angular/common/http'; @NgModul ...

  9. nuget用法

    Update-Package -reinstall -ProjectName Cardin.HeartCare.Service.ChatService

  10. 【数据传输 1】服务器—&gt;客户端之间的数据类型转换

    导读:在做项目的时候,在controller中,将List数据类型转换为了JSON字符串,那么,为什么要将其数据转换为JOSN呢?这样的转换是否是必须的,在这个转换过程中,又经过了那些步骤?注:本篇博 ...