/**
* 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. Python基础(九)--函数

    函数的作用 减少重复代码 程序易于维护 程序易于扩展 函数的定义 >>> def calculate(x,y): #定义函数名为calculate,参数为x和y result = x ...

  2. Java Volatile关键字(转)

    出处:  Java Volatile关键字 Java的volatile关键字用于标记一个变量“应当存储在主存”.更确切地说,每次读取volatile变量,都应该从主存读取,而不是从CPU缓存读取.每次 ...

  3. 常见排序&查询算法Java代码实现

    1. 排序算法代码实现 /** * ascending sort * 外层循环边界条件:总共需要冒泡的轮数--每一轮都将最大或最小的数冒泡到最后 * 内层循环边界条件:冒泡数字移动的边界--最终数字需 ...

  4. 【wifi移植 2】 移植wpa_supplicant

    参考文章: http://bbs.eeworld.com.cn/thread-447273-1-1.html(加精作品) 1. 下载源码 下载wpa_supplicant-2.2.tar(openss ...

  5. Python 3 中字符串和 bytes 的区别

    在Python中字符串和unicode真是傻傻分不清楚,在没搞懂两个区别时,你会发现程序报的错怎么改都是再报错,让你烦躁. 学习Python的时候,又重温了这部分内容,写了这个学习笔记. Python ...

  6. Centos下安装compoer, 解决vendor目录问题

    laravel部署时使用git拉代码的话,vendor目录部署是没有提交到git上的,如果没有该目录,服务会报错如下 Warning: require(/opt/soft/pro/bootstrap/ ...

  7. linux 计划任务超时控制和并发控制

    Linux crontab 的配置存放 /var/spool/cron 目录下. Linux crontab的日志文件存放再 /var/log/cron* timeout 命令 timeout 给脚本 ...

  8. 【ios bug解决】 输入框聚焦时光标不显示

    解决办法:重写user-select样式 css:   user-select: text;-webkit-user-select:text;

  9. 认识并初步应用GitHub

    好好学习,天天向上 一.这是一个简单的开头 GIT的地址 https://github.com/Notexcellent GIT的用户名 Notexcxllent 学号后五位 82405 博客地址 h ...

  10. Naming Company CodeForces - 794C (博弈,构造)

    Oleg the client and Igor the analyst are good friends. However, sometimes they argue over little thi ...