/**
* Created by Administrator on 2019/5/23.
*/
window.onload = function () {
var oDiv = document.getElementById('touchMove'); var disX, moveX, L, T, starX, starY, starXEnd, starYEnd; oDiv.addEventListener('touchstart', function (e) {
//e.preventDefault(); disX = e.touches[0].clientX - this.offsetLeft;
disY = e.touches[0].clientY - this.offsetTop;
starX = e.touches[0].clientX;
starY = e.touches[0].clientY;
});
oDiv.addEventListener('touchmove', function (e) {
L = e.touches[0].clientX - disX;
T = e.touches[0].clientY - disY;
starXEnd = e.touches[0].clientX - starX;
starYEnd = e.touches[0].clientY - starY;
//console.log(L);
if (L < 0) {
L = 0;
} else if (L > document.documentElement.clientWidth - this.offsetWidth) {
L = document.documentElement.clientWidth - this.offsetWidth;
} if (T < 0) {
T = 0;
} else if (T > document.documentElement.clientHeight - this.offsetHeight) {
T = document.documentElement.clientHeight - this.offsetHeight;
}
moveX = L + 'px';
moveY = T + 'px';
//console.log(moveX);
this.style.left = moveX;
this.style.top = moveY;
});
window.addEventListener('touchend', function (e) {
//alert(parseInt(moveX))
//判断滑动方向 });
}
 

js实现移动端悬浮图标拖拽的更多相关文章

  1. Hammer.js 实现移动端元素的拖拽库

    1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...

  2. nw.js FrameLess Window下的窗口拖拽与窗口大小控制

    nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

  3. PC端的鼠标拖拽滑动

    1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=fun ...

  4. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  5. 适合pc端的移动拖拽,分享一下。

    h5新加的特性拖拽事件,但是只适合PC端哦.不多说了上代码 <!DOCTYPE html> <html> <head> <title></titl ...

  6. 利用插件(jQuery-ui.js)实现表格行的拖拽排序

    template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...

  7. 关于js在一个固定的盒子里面拖拽的问题(包含临界值)

    回武汉打卡第三天,武汉加油,逆战必胜!今天我们一起分享一下js拖拽的问题. 当然实现拖拽方法是有很多的,下面简单讲一种方法,大致思路如下: 首先需要用到的事件主要有  onmousedown,onmo ...

  8. js实现弹出框的拖拽

    //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...

  9. js基础 -----鼠标事件(按下 拖拽)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. #import "msado15.dll" no_namespace rename("EOF","adoEOF")

    引入动态链接库msado15.dll的信息, no_namespace--无命名空间 rename(“EOF”,“adoEOF”)--把文件结束符“EOF”,更换成“adoEOF”

  2. 2019年9月训练(贰)区间DP (luogu 4290)

    区间DP luogu 4290 明显的区间DP. 定义 dp[l][r][k]/*表示区间[l,r]能否凑成k(W,I,N,G)字符*/mp['W']=1;mp['I']=2;mp['N']=3;mp ...

  3. JWT的认识和session的区别

    1.前后端分离框架中前端和后端域名不同,不能跨域请求,加上移动端无cookie,所以无法使用session.2.基于token的认证和传统的session认证的区别: 传统的session认证: 我们 ...

  4. 一次生产的JVM优化

    背景 生产环境有二台阿里云服务器,均为同一时期购买的,CPU.内存.硬盘等配置相同.具体配置如下: 节点 CPU 内存 硬盘 其它 A 2CPU 4G 普通云盘 Centos6.4 64位+JDK1. ...

  5. T100——修改单身栏位,开窗,当前行

    PRIVATE FUNCTION axmt500_update_xmdc028() ###更改出货库位 DEFINE l_i INT DEFINE l_index INT DIALOG ATTRIBU ...

  6. Neo4j Cypher语法(二)

    目录 4 子句 4.1 CREATE 4.2 MATCH 4.3 Match 4.4 Create match return连用来返回一个关系基础 4.5 Optional_match 4.6 Wit ...

  7. Eclipse怎么改变@author 姓名

    1 点击windows  然后选择 点击进去选择搜索code Templates  点击选择出现下面的页面 点开comments,里面有给方法,变量 ,类等加注释设置的模板 如:点击Methods  ...

  8. [C#.net]连接Oracle的几种方式

    一:通过System.Data.OracleClient(需要安装Oracle客户端并配置tnsnames.ora)1. 添加命名空间System.Data.OracleClient引用2. usin ...

  9. 解决windows系统下ping,ipconfig不是内部或外部命令

    一般情况下,都是误删了系统变量path的值.解决方法:右击我的电脑 → 选择属性 → 选择高级系统设置 → 环境变量 → 在系统变量列表中,找到“path”环境变量双击,打开.在变量值这一栏检测下是否 ...

  10. RAII惯用法:C++资源管理的利器(转)

    RAII惯用法:C++资源管理的利器 RAII是指C++语言中的一个惯用法(idiom),它是“Resource Acquisition Is Initialization”的首字母缩写.中文可将其翻 ...